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

深藏阁楼爱情的钟 2022-09-08 00:30 113阅读 0赞

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

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

[在线演示][Link 1]

缺省的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的垂直进度条效果][GBin1.com]

[GBin1.com]: http://www.gbin1.com/technology/jquery/20130924-jquery-ui-vertical-progress-bar/
[jQuery UI]: http://www.gbin1.com/technology/jquery/20130924-jquery-ui-vertical-progress-bar/title.jpg
[Link 1]: http://www.gbin1.com/gb/demoviewer/2001/e6a59fd7-c183-46cc-af2c-e3792c1c7f34/index.html.htm
[gbtags.com]: http://www.gbin1.com/gb/share/2001.htm

发表评论取消回复

表情：

评论列表（有 0 条评论，113人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery UI 实例 - 进度条（Progressbar）

显示一个确定的或不确定的进程状态。如需了解更多有关 progressbar 部件的细节，请查看 API 文档 [进度条部件（Progressbar Widget）][Pro

﹏ヽ暗。殇╰゛Y/ 2024年03月24日 17:14/ 0 赞/ 64 阅读

相关自定义彩色进度条效果

自定义彩色进度条效果效果如下：颜色可以随意设置 ![GIUACaI.gif][] View代码 1 package angus.wsj.com.c

川长思鸟来/ 2024年02月18日 17:45/ 0 赞/ 80 阅读

相关垂直方向进度条

<ProgressBar android:id="@+id/spb" style="?android:attr/prog

墨蓝/ 2023年10月03日 18:51/ 0 赞/ 11 阅读

相关实现进度条效果的多种方法

今天想实现的效果有点难度： [https://segmentfault.com/q/1010000037539000][https_segmentfault.com_q_10

旧城等待，/ 2022年12月16日 13:13/ 0 赞/ 174 阅读

相关实现一个进度条效果

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schem

左手的ㄟ右手/ 2022年09月24日 04:21/ 0 赞/ 237 阅读

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

日期：2013-9-24 来源：[GBin1.com][] ![创建一个jQuery UI的垂直进度条效果][jQuery UI] [在线演示][Link 1] 缺省的

深藏阁楼爱情的钟/ 2022年09月08日 00:30/ 0 赞/ 114 阅读

相关 JavaScript 带粒子效果的进度条

<html> <head> <meta charset="utf8"/> <!-- <meta name

忘是亡心i/ 2022年07月13日 11:28/ 0 赞/ 246 阅读

相关从零开始学PowerShell(8) 创建一个进度条

我相信不少人会遇到这类情况，通常在执行一些大批量操作时，代码正在后台持续执行，你又没有为每个细节设置详尽的输出的话，你也不知道到底是脚本卡死了还是正在运行，因为没有任何响应反馈

拼搏现实的明天。/ 2022年05月28日 02:19/ 0 赞/ 167 阅读

相关 linuxshell如何实现进度条效果

代码如下： b='' for ((i=0;$i<=100;i+=2)) do printf "PleaseWait:\[%-50s\]%d%%\\

超、凢脫俗/ 2022年04月18日 02:16/ 0 赞/ 803 阅读

相关环形进度条（jQuery，canvas）

接到了一个在手机app上绘制圆环进度条的需求。找了很多插件都不是很满意，就自己用jQuery+canvas画了一个。最终效果图 ![这里写图片描述][70] 完整代码

╰+攻爆jí腚メ/ 2021年09月27日 06:18/ 0 赞/ 480 阅读