《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.7　技巧：使用进度条微件显示进程的状态

本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第7章，第7.7节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看

7.7 技巧：使用进度条微件显示进程的状态

当Web应用程序执行一个动作的持续时间超过大约两秒钟时，为用户显示动作状态是一个很好的做法。如果不知道动作的状态，通常会改变鼠标光标或显示一个旋转的效果。

在某些情况下，你能知道进程的进度。在这种情况下，最好尽可能准确地满足用户的期待。代码清单7-7介绍了jQuery UI的进度条（progressbar），可以使用它实现这样的目的。

代码清单7-7 将一个

元素转换为进度条

00 !DOCTYPE html 

02 html lang="en" 

03 head 

04 title jQuery UI Progressbar /title 

05 link type="text/css" rel="stylesheet" href=

06 "http://code.jquery.com/ui/1.8.16/themes/base/jquery-ui.css" 

07 /head 

08 body 

10 div id="my-progress" /div 

12 script src="http://code.jquery.com/jquery-1.7.1.min.js" /script 

13 script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js" 

14 /script 

16 script 

17 // 请将下列代码移至一个外部的.js文件中

18 $(document).ready(function() {

20 var el = $(#my-progress);

22 el.on(progressbarcreate, function(event, ui) {

23 el.after( p Start value:  + el.progressbar(value) +  /p 

24 });

26 el.progressbar();

28 // 进度条动画

29 var count = 0; 

30 setInterval(function() {

31 if(count++ 100) count = 0;

32 el.progressbar(value, count);

33 },100);

35 });

36 /script 

37 /body 

38 /html 

这个例子中使用JavaScript的内置函数setInterval来模拟实际的进度。测定实际进程的进度可能需要一些巧妙的思考和计算。

7.7.1 为进度条元素添加样式
jQuery UI使用一些类和属性扩展了目标div，并添加了一个显示进度的子div。避免在进度条div上添加文字，因为这将造成进度指示不能工作。

 div id="my-progress"

 role="progressbar" aria-valuemin="0" aria-valuemax="100"

 aria-valuenow="90" 

 div /div 

 /div 

7.7.2 设置进度条的选项
下面的代码展示了如何设置进度条的选项。

在创建过程中禁用进度条：

$(#my-progress).progressbar({disabled: true});
创建一个进行了25%的进度条：

$(#my-progress).progressbar({value: 25});
7.7.3 捕获进度条的事件
下面的代码演示了使用进度条时如何处理相应的事件。

一个新的进度条被初始化：

$(#my-progress).progressbar({create: function(event, ui) {

 // 事件处理

$(#my-progress)

 .on(progressbarcreate, function(event, ui) {

 // 事件处理

 .progressbar();

当进度条的状态改变时进行的事件处理：

$(#my-progress).progressbar({change: function(event, ui) {

 // 事件处理

$(#my-progress).progressbar()

 .on(progressbarchange, function(event, ui) {

 // 事件处理

当进度条达到100%时进行的事件处理。你可以使用该事件来改变进度条的外观，比如可以高亮它的状态。

$(#my-progress).progressbar({complete: function(event, ui) {

 // 事件处理

$(#my-progress).progressbar()

 .on(progressbarcomplete, function(event, ui) {

 // 事件处理

7.7.4 调用进度条的方法
进度条使用的方法与第6章讲的可拖曳交互组件以及本章开头讲的折叠菜单微件的方法相似。参阅这些章节来获得关于destroy、disable、enable、option和widget的详细内容。

将进度条的值更新到一个指定值：

$(#my-progress).progressbar(value, 50));

15款优秀的jQuery-Mobile插件 移动互联网迅速发展，PC端的网页并不能完全适应移动端页面需求，响应式设计体验产生并成为潮流。由此也促成了jQuery Mobile的流行。jQuery Mobile这样一款基于jQuery和jQuery UI的框架，继承了jQuery的“write less,do more”精髓，具有良好的扩展性和可定制性，全面兼容各种平台设备，对于不支持的手机类型，也会降级到基础样式。
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。