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

最新推荐文章于 2024-04-29 17:16:43 发布

weixin_34233421

最新推荐文章于 2024-04-29 17:16:43 发布

阅读量67

点赞数

文章标签： ui javascript ViewUI

原文链接：https://my.oschina.net/gbin1/blog/163929

版权

为什么80%的码农都做不了架构师？>>>

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

via gbtags.com

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

转载于:https://my.oschina.net/gbin1/blog/163929