Progressbar控件用来显示任意进程的完成百分比。
- 默认安装启用
- 配置选项
- 控件暴露的事件API
- progressbar暴露的独一无二的方法
- 一些现实生活的例子
当前版本中，我们或系统必须明确进度的总量。
由外部<div>容器和 内部<div>容器构成。内部的<div>用来高亮当前进度。
1 安装启用默认的 progressbar
1 <div id="myProgressbar"> 2 </div> 3 <script src="development-bundle/jquery-1.4.4.js"></script> 4 <script src="development-bundle/ui/jquery.ui.core.js"></script> 5 <script src="development-bundle/ui/jquery.ui.widget.js"></script> 6 <script src="development-bundle/ui/jquery.ui.progressbar.js"></script> 7 <script> 8 $(function(){ 9 $("#myProgressbar").progressbar(); 10 }); 11 </script>
在例子中，我们使用了<div>元素。但是任何 块级 的元素 block-level elements ，比如 <a> ，也能使用。控件会在初始化时，给这个指定的元素添加一个代表progressbar的值得嵌入<div>元素。
这个控件，会像其他控件一样，填满它的外层容器。组件会自动给外层容器和内层<div>添加一系列的属性和classnames。
ARIA-compliant 这个附加的属性也会被添加到控件。使得控件完全支持浏览者使用辅助技术访问。
2 progressbar的配置选项
| Option | Default Value | Used to… |
| disabled | false | 禁用控件 |
| Value | 0 | 用百分率的方式设置控件的值 |
2.1 设置 progressbar 的值
1 var progressbarOption={ 2 value:50 3 }
value选项通过一个整数，以百分比的方式设置内层<div>的宽度。
3 progerssbar的event API
| Event | Fired when… |
| create | 当控件初始化后 |
| change | 控件值变化 |
| complete | 控件的值达到100% |
1 <div id="myProgressbar"> 2 </div> 3 <button id="increase">Increase by 10%</button> 4 5 $(function(){ 6 var progress = $("#myProgressbar"); 7 var progressbarOpts={ 8 change:function(){ 9 var val=$(this).progressbar("option","value"); 10 if(!$("#value").length){ 11 console.log("no"+val); 12 $("<span id='value' />").text(val+"%").css({float:"right",marginTop:-28,marginRight:10}).appendTo(progress); 13 } 14 else{ 15 $("#value").text(val+"%"); 16 console.log("yes"+val); 17 } 18 } 19 }; 20 progress.progressbar(progressbarOpts); 21 $("#increase").click(function(){ 22 var currentVal=progress.progressbar("option","value"), 23 newVal=currentVal+10; 24 progress.progressbar("option","value",newVal); 25 }); 26 });
我们首先为存储progressbar的选择器，然后为 change event 定义一个 event handler 。在这个回调函数中，我们首先获得progressbar的最后更新的值。字 event handler中，我们可以使用 $(this) 来选择 progressbar。
提供的值要小于等于100，我们检查这个页面上是否已经有一个元素包含 id=value 。如果这里没有，我们就新建一个 <span> 元素，并且设置它的text和当前的位置。我们同样给他一个id 和 Position ，所以它显示在progressbar的里面。如果元素已经存在，我们只需要将他的text设为新值。
当点击button时，首先使用 option 方法的 getter 模式，得到 progressbar 的当前值。
也可以使用 jQuery 的 bind() 方法，在事件的名字前加上控件的名字作为前缀，例如 progressabarchange。
4 Progressbar 的方法
除了所有库组件都有的 destroy disable,enalbe,option方法，progressbar还有一个 value 方法，它可以以捷径的方式使用 option 方法，设置progressbar的值。
1 $("#increase").click(function(){ 2 var currentVal=progress.progressbar("option","value"), 3 newVal=currentVal+10; 4 progress.progressbar("value",newVal); 5 });
5 用户发起进展 User initiated progress
在这个最基础的等级，在用户交互中，我们能手动更新progressbar。我们可以指定一个向导形式的 表单，它拥有几个步骤来完成。在每个步骤，我们可以手动增加progressbar，让用户知道他们完成了多少。
1 <style> 2 h1, h2 { font-family:Georgia; font-size:140%; margin-top:0;} 3 h2 { margin:20px 0 10px; font-size:100%; text-align:left;} 4 p { 5 margin:0; font-size:75%; position:absolute; left:30px; 6 top:60px; font-weight:bold; 7 } 8 #amount { 9 position:absolute; right:30px; top:60px; font-size:80%; 10 font-weight:bold; 11 } 12 #thanks { text-align:center;} 13 #thanks p { 14 margin-top:48px; font-size:160%; position:relative; left:0; 15 top:0; 16 } 17 form { height:265px; position:relative;} 18 .form-container { 19 width:400px; margin:0 auto; position:relative; 20 font-family:Verdana; font-size:80%; padding:20px; 21 background-color:#e0e3e2; border:1px solid #abadac; 22 } 23 .form-panel { 24 width:400px; height:241px; position:absolute; top:0; left:0;} 25 fieldset { 26 width:397px; height:170px; margin:0 auto; padding:22px 0 0; 27 border:1px solid #abadac; background-color:#ffffff; 28 } 29 label { 30 width:146px; display:block; float:left; text-align:right; 31 padding-top:2px; margin-right:10px; 32 } 33 input, textarea { 34 float:left; width:200px; margin-bottom:13px; 35 } 36 button { float:right;} 37 </style> 38 </script> 39 40 <div class="form-container ui-helper-clearfix ui-corner-all"> 41 <h1>Registration Form</h1> 42 <p>Progress:</p> 43 <div id="progress"></div> 44 <label id="amount">0%</label> 45 <form action="serverScript.php"> 46 47 <div class="form-panel"> 48 <h2>Personal Details</h2> 49 <fieldset class="ui-corner-all"> 50 <label>Name:</label> 51 <input type="text"> 52 <label>D.O.B:</label> 53 <input type="text"> 54 <label>Chose password:</label> 55 <input type="password"> 56 <label>Confirm password:</label> 57 <input type="password"> 58 </fieldset> 59 </div> 60 61 <div class="form-panel ui-helper-hidden"> 62 <h2>Contact Details</h2> 63 <fieldset class="ui-corner-all"> 64 <label>Email:</label> 65 <input type="text"> 66 <label>Telephone:</label> 67 <input type="text"> 68 <label>Address:</label> 69 <textarea rows="3" cols="25"></textarea> 70 </fieldset> 71 </div> 72 73 <div class="form-panel ui-helper-hidden"> 74 <h2>Registration Complete</h2> 75 <fieldset class="ui-corner-all"> 76 <p>Thanks for registering!</p> 77 </fieldset> 78 </div> 79 80 81 </form> 82 <button id="next">Next</button> 83 <button id="back" disable="disabled">Back</button> 84 </div> 85 86 87 $(function(){ 88 var prog=$("#progress"), 89 progressOpts={ 90 change:function(){ 91 prog.next().text(prog.progressbar("value")+"%"); 92 } 93 }; 94 prog.progressbar(progressOpts); 95 $("#next,#back").click(function(){ 96 $("button").attr("disabled",true); 97 if(this.id=="next"){ 98 console.log("next button"+prog.progressbar("option","value")); 99 prog.progressbar("option","value",prog.progressbar("option","value")+50); 100 $("form").find("div:visible").fadeOut().next().fadeIn(function(){ 101 $("#back").attr("disabled",false); 102 if(!$("form").find("div:last").is(":visible")){ 103 $("#next").attr("disabled",false); 104 } 105 }); 106 }else{ 107 console.log("prev button"+prog.progressbar("option","value")); 108 prog.progressbar("option","value",prog.progressbar("option","value")-50); 109 $("form").find("div:visible").not(".buttons").fadeOut().prev().fadeIn(function(){ 110 $("#next").attr("disabled",false); 111 if(!$("form").find("div:first").is(":visible")){ 112 $("#back").attr("disabled",false); 113 } 114 }); 115 } 116 }); 117 });
6 使用 progressbar 的富 uploads
HTML5 文件 API，异步 upload 文件，在文件被上传时，使用 onprogress 事件更新 progressbar 。尽管 onprogress 事件被定义在 官方 W3C 规格说明书中，但目前仅被Firefox 和 webkit 实现。 getAsBinary() 方法只有 Firefox 3.5+有， webkit 浏览器没。