進度條可以向用戶顯示程序當前完成的百分比，讓用戶知道程序的進度，提高了用戶體驗。而jquery ui 則提供一個非常便捷的方法實現這一功能，就是progressbar.

創(chuàng)新互聯是一家集網站建設,寧強企業(yè)網站建設,寧強品牌網站建設,網站定制,寧強網站建設報價,網絡營銷,網絡優(yōu)化,寧強網站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯網需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網站。

一、 老規(guī)矩，先上一個簡單的例子

1、代碼如下：

2、 效果圖如下：

jQuery UI Progressbar –ifxoxo

二、具體用法

1、需要加載的js文件

(1)jquery.js
(2)jquery.ui
(3)jquery.ui的css

2、頁面上的html代碼

需要一個用來裝progressbar的空容器

3、js代碼

(1)options

它有三個參數可以使用

(2)事件

• create： 加載progressbar的時候此事件將被觸發(fā)

• change： 進度條有改變的時候此事件將被觸發(fā)

• complete： 加載到100的時候此事件將被觸發(fā)

4、一個會動的進度條的實例

（1）代碼如下

（2）截圖

progressbar loading的截圖–ifxoxo.com

進度條增加value的截圖–ifxoxo.com

progressbar 完成的截圖–ifxoxo.com

5、其他

1、事件

(1)create 加載progressbar的時候此事件將被觸發(fā)
(2)change 進度條有改變的時候此事件將被觸發(fā)
(3)complete 加載到100的時候此事件將被觸發(fā)

2、方法

(1) destory 銷毀 .progressbar( “destroy” )
(2) disable 不可用 .progressbar( “disable” )
(3) enable 可用 .progressbar( “enable” )
(4) option 獲取參數 .progressbar( “option”, optionName )
(5) option 設置參數 .progressbar( “otion” , optionName , [value] )
(6) widget 返回這個element .progressbar( “widget” )
(7) value獲取/設置value .progressbar( “value” , [value] )

三、其他相關聯文章

1、jquery ui（一）簡介
2、jquery ui（二）拖拽 draggable和droppable
3、jquery ui（三）彈出窗口 dialog
4、jquery ui（四）進度條 progressbar
5、jquery ui（五）日期選擇器 datepicker