js|jquery ui progressbar js|jquery

进度条可以向用户显示程序当前完成的百分比，让用户知道程序的进度，提高了用户体验。而jquery ui 则提供一个非常便捷的方法实现这一功能，就是progressbar.
老规矩，先上一个简单的例子。
【代码】

【效果图】

文章图片
ui（四）进度条 progressbar" style="border:0px; list-style:none; ; border:1px solid black; " width="360" height="360">

下面介绍一下具体用法：
一、需要加载的js文件
(1)jquery.js
(2)jquery.ui.core.js
(3)jquery.ui.widget.js
(4)jquery.ui.progressbar.js

二、html代码
需要一个用来装progressbar的空容器

三、js代码
初始化函数：$(.selecter).progressbar()
【参数】

参数	默认	作用
value	0	进度条显示的度数（0到100）

【代码示例】
//一个会动的进度条

文章图片
ui（四）进度条 progressbar" style="border:0px; list-style:none; ; border:1px solid black; " width="360" height="360">

【效果】
展示一个用了自定义gif动画为进度条的背景，每500毫秒就前进3刻度的进度条。
（1）进度条背景声明：

.ui-progressbar-value { background-image: url(images/pbar-ani.gif); }

（2）每500毫秒加载前进 3刻度的循环调用
//使用setTimeout函数延迟调用updateProgressbarValue函数，延迟时间为500毫秒
setTimeout(updateProgressbarValue, 500);

四、其他
1、事件
(1)create加载progressbar的时候此事件将被触发
(2)change进度条有改变的时候此事件将被触发
【js|jquery ui progressbar】(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( "option" , optionName , [value] )
(6)widget返回这个element.progressbar( "widget" )
(7)value获取/设置value.progressbar( "value" , [value] )

【示例】
//设置进度条新值
$("#divProgressbar").progressbar( "value", 90);