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

来源：互联网发布：软件测试工程师培训班编辑：程序博客网时间：2024/05/30 02:24

日期：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其它版本的垂直进度条效果支持，请自行修改。

via gbtags.com

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