7.7 技巧：使用进度条微件显示进程的状态
当Web应用程序执行一个动作的持续时间超过大约两秒钟时，为用户显示动作状态是一个很好的做法。如果不知道动作的状态，通常会改变鼠标光标或显示一个旋转的效果。
在某些情况下，你能知道进程的进度。在这种情况下，最好尽可能准确地满足用户的期待。代码清单7-7介绍了jQuery UI的进度条（progressbar），可以使用它实现这样的目的。
代码清单7-7 将一个
元素转换为进度条
00 <!DOCTYPE html>
01
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>
09
10 <div id="my-progress"></div>
11
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>
15
16 <script>
17 // 请将下列代码移至一个外部的.js文件中
18 $(document).ready(function() {
19
20 var el = $('#my-progress');
21
22 el.on('progressbarcreate', function(event, ui) {
23 el.after('<p>Start value: ' + el.progressbar('value') + '</p>');
24 });
25
26 el.progressbar();
27
28 // 进度条动画
29 var count = 0;
30 setInterval(function() {
31 if(count++ > 100) count = 0;
32 el.progressbar('value', count);
33 },100);
34
35 });
36 </script>
37 </body>
38 </html>
这个例子中使用JavaScript的内置函数setInterval来模拟实际的进度。测定实际进程的进度可能需要一些巧妙的思考和计算。
7.7.1 为进度条元素添加样式
jQuery UI使用一些类和属性扩展了目标div，并添加了一个显示进度的子div。避免在进度条div上添加文字，因为这将造成进度指示不能工作。
<div id="my-progress"
class="ui-progressbar ui-widget ui-widget-content ui-corner-all"
role="progressbar" aria-valuemin="0" aria-valuemax="100"
aria-valuenow="90">
<div class="ui-progressbar-value ui-widget-header ui-corner-left"
style="display: block; width: 90%; "></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));