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

日期：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的垂直进度条效果