jqueryui(四)进度条progressbar

进度条可以向用户显示程序当前完成的百分比,让用户知道程序的进度,提高了用户体验。而jquery ui 则提供一个非常便捷的方法实现这一功能,就是progressbar.

创新互联是一家集网站建设,宁强企业网站建设,宁强品牌网站建设,网站定制,宁强网站建设报价,网络营销,网络优化,宁强网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

一、 老规矩,先上一个简单的例子

1、代码如下:






ifxoxo.com..7%

2、 效果图如下:

jquery ui(四)进度条 progressbar

jQuery UI Progressbar –ifxoxo

二、具体用法

1、需要加载的js文件

(1)jquery.js
(2)jquery.ui
(3)jquery.ui的css



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








Loading...



(2)截图
jquery ui(四)进度条 progressbar

progressbar loading的截图–ifxoxo.com

jquery ui(四)进度条 progressbar

进度条增加value的截图–ifxoxo.com

jquery ui(四)进度条 progressbar

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


分享标题:jqueryui(四)进度条progressbar
分享地址:http://csdahua.cn/article/gecdeg.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流