jquery ui（四）进度条 progressbar javascript

【jquery ui（四）进度条 progressbar】进度条可以向用户显示程序当前完成的百分比，让用户知道程序的进度，提高了用户体验。而jquery ui 则提供一个非常便捷的方法实现这一功能，就是progressbar.
一、老规矩，先上一个简单的例子 1、代码如下：
= "text/javascript" src = "http://code.jquery.com/jquery-1.9.1.js" >
= "text/javascript" src = "http://code.jquery.com/ui/1.10.3/jquery-ui.js" >
< link href = "http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel = "stylesheet" />
= "text/javascript" >
$ ( function ( ) {
$ ( "#progressbar1" ) .progressbar ( {value : 7 } ) ;
} ) ;

ifxoxo .com .. 7 %

2、效果图如下：
jQuery UI Progressbar –ifxoxo
二、具体用法 1、需要加载的js文件
(1)jquery.js
(2)jquery.ui
(3)jquery.ui的css
= "text/javascript" src = "http://code.jquery.com/jquery-1.9.1.js" >
= "text/javascript" src = "http://code.jquery.com/ui/1.10.3/jquery-ui.js" >
< link href = "http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel = "stylesheet" /> 2、页面上的html代码
需要一个用来装progressbar的空容器

3、js代码
初始化函数：$ ( .selecter ) .progressbar ( ) (1)options 它有三个参数可以使用

参数	默认值	作用
value	0	进度条显示的度数（0到100）
max	100	进度条的最大值
disable	false	是否隐藏

(2)事件

create：加载progressbar的时候此事件将被触发
change：进度条有改变的时候此事件将被触发
complete：加载到100的时候此事件将被触发

4、一个会动的进度条的实例
（1）代码如下

jQuery UI Progressbar - Custom Label
< link rel = "stylesheet" href = "http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
= "http://code.jquery.com/jquery-1.9.1.js" >
= "http://code.jquery.com/ui/1.10.3/jquery-ui.js" >
>
//为了让样式清晰一点
.ui -progressbar {
position : relative ;
}
.progress -label {
position : absolute ;
left : 50 %;
top : 4px ;
font -weight : bold ;
text -shadow : 1px 1px 0 #fff;
}

>
$ ( function ( ) {
var pro = $ ( "#progressbar" ) ; //进度条div
var proLabel = $ ( ".progress-label" ) ; //进度条里面文字

pro .progressbar ( {
value : false , //初始化的值为0
change : function ( ) {
//当value值改变时，同时修改label的字
proLabel .text ( pro .progressbar ( "value" ) + "%" ) ;
} ,
complete : function ( ) {
//当进度条完成时，显示complate
proLabel .text ( "Complete!" ) ;
}
} ) ;

//延迟500毫秒调用修改value的函数
setTimeout ( addValue , 500 ) ;

//动态修改value的函数
function addValue ( ) {
var pro = $ ( "#progressbar" ) ;
var newValue = https://www.it610.com/article/pro .progressbar ("value" ) + 1 ;

pro .progressbar ( "value" ,newValue ) ; //设置新值
if ( newValue >= 100 ) { return ; } //超过100时，返回

setTimeout ( addValue , 500 ) ; //延迟500毫秒递归调用自己
}
} ) ;

Loading ...

（2）截图 progressbar loading的截图–ifxoxo.com
进度条增加value的截图–ifxoxo.com
progressbar 完成的截图–ifxoxo.com
5、其他
1、事件 (1)create 加载progressbar的时候此事件将被触发
(2)change 进度条有改变的时候此事件将被触发
(3)complete 加载到100的时候此事件将被触发
$ ( '.selector' ) .progressbar ( {
complete : function (event , ui ) { alert ( 'has complete!!' ) ; }
} ) ; 2、方法 (1) destory 销毁 .progressbar( “destroy” )
(2) disable 不可用 .progressbar( “disable” )
(3) enable 可用 .progressbar( “enable” )
(4) option 获取参数 .progressbar( “option”, optionName )
(5) option 设置参数 .progressbar( “otion” , optionName , [value] )
(6) widget 返回这个element .progressbar( “widget” )
(7) value 获取/设置value .progressbar( “value” , [value] )
//设置进度条新值
$ ( "#divProgressbar" ) .progressbar ( "value" , 90 ) ; 三、其他相关联文章 1、jquery ui（一）简介
2、jquery ui（二）拖拽 draggable和droppable
3、jquery ui（三）弹出窗口 dialog
4、jquery ui（四）进度条 progressbar
5、jquery ui（五）日期选择器 datepicker