《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>
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));

上一篇:cassandra删除所有数据,重置为初始状态——删除/data/* /commitlog/* /saved_caches/* 重启cassandra即可


下一篇:【shiro】使用shiro,点击页面请求总是302状态码