日期：2013-9-24  来源：GBin1.com

在线演示

缺省的jQuery UI只有水平的进度条效果，没有垂直的进度条效果，仅仅重新定义JQuery UI的CSS不能解决这个问题。

这里我们扩展缺省的option，添加一个orientation的参数，实现一个垂直滚动调效果，代码如下：

    /*

    * jQuery UI Progressbar 1.8.2

    *

    * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)

    * Dual licensed under the MIT (MIT-LICENSE.txt)

    * and GPL (GPL-LICENSE.txt) licenses.

    *

    * http://docs.jquery.com/UI/Progressbar

    *

    * Depends:

    * jquery.ui.core.js

    * jquery.ui.widget.js

    */

    (function( $ ) {

    $.widget( "ui.progressbar", {

    options: {

    value: 0,

    orientation : "horizontal"

    },

    _create: function() {

    this.element

    .addClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" )

    .addClass("ui-progressbar-" + this.options.orientation)

    .attr({........

如果你需要JQuery UI其它版本的垂直进度条效果支持，请自行修改。

viagbtags.com

来源：创建一个jQuery UI的垂直进度条效果