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

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

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

在线演示

缺省的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的垂直进度条效果

上一篇:Oracle 数据库基础学习 (二) 学习小例子:创建一个表,记录商品买卖的情况


下一篇:使用 ADD-ON SDK 开发 基于 Html JQuery 和 CSS 的 firefox 插件入门教程1: 创建一个简单的 Add-on