案例：jQuery UI案例     状态：可编辑再运行    进入竖版
 运行结果　
AخA
 
1
<!doctype html>
2
<html lang="en">
3
<head>
4
  <meta charset="utf-8">
5
  <title>jQuery UI 进度条（Progressbar） - 自定义标签</title>
6
  <link rel="stylesheet" href="/css/jqu1.10.4/jquery-ui.min.css">
7
  <script src="/js/jqu/jquery.min1.10.2.js"></script>
8
  <script src="/js/jqu/jquery-ui.min1.10.4.js"></script>
9
  <link rel="stylesheet" href="jqueryui/style.css">
10
  <style>
11
  .ui-progressbar {
12
    position: relative;
13
  }
14
  .progress-label {
15
    position: absolute;
16
    left: 50%;
17
    top: 4px;
18
    font-weight: bold;
19
    text-shadow: 1px 1px 0 #fff;
20
  }
21
  </style>
22
  <script>
23
  $(function() {
24
    var progressbar = $( "#progressbar" ),
25
      progressLabel = $( ".progress-label" );
26
27
    progressbar.progressbar({
28
      value: false,
29
      change: function() {
30
        progressLabel.text( progressbar.progressbar( "value" ) + "%" );
31
      },
32
      complete: function() {
33
        progressLabel.text( "完成！" );
34
      }
35
    });
36
37
    function progress() {
38
      var val = progressbar.progressbar( "value" ) || 0;
39
40
      progressbar.progressbar( "value", val + 1 );
41
42
      if ( val < 99 ) {
43
        setTimeout( progress, 100 );
44
      }
45
    }
46
47
    setTimeout( progress, 3000 );
48
  });