本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第7章，第7.7节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
当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));
相关资源：jquery 实现流程进度显示