《jQuery、jQuery UI及jQuery Mobile技巧與示例》——7.7 技巧：使用進度條微件顯示程序的狀态

本節書摘來自異步社群《jquery、jquery ui及jquery mobile技巧與示例》一書中的第7章，第7.7節，作者：【荷】adriaan de jonge , 【美】phil dutson著，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視

當web應用程式執行一個動作的持續時間超過大約兩秒鐘時，為使用者顯示動作狀态是一個很好的做法。如果不知道動作的狀态，通常會改變滑鼠光标或顯示一個旋轉的效果。

在某些情況下，你能知道程序的進度。在這種情況下，最好盡可能準确地滿足使用者的期待。代碼清單7-7介紹了jquery ui的進度條（progressbar），可以使用它實作這樣的目的。

代碼清單7-7　将一個

元素轉換為進度條

這個例子中使用javascript的内置函數setinterval來模拟實際的進度。測定實際程序的進度可能需要一些巧妙的思考和計算。

7.7.1　為進度條元素添加樣式

jquery ui使用一些類和屬性擴充了目标div，并添加了一個顯示進度的子div。避免在進度條div上添加文字，因為這将造成進度訓示不能工作。

7.7.2　設定進度條的選項

下面的代碼展示了如何設定進度條的選項。

在建立過程中禁用進度條：

<code>$('#my-progress').progressbar({disabled: true});</code>

建立一個進行了25%的進度條：

<code>$('#my-progress').progressbar({value: 25});</code>

7.7.3　捕獲進度條的事件

下面的代碼示範了使用進度條時如何處理相應的事件。

一個新的進度條被初始化：

當進度條的狀态改變時進行的事件處理：

當進度條達到100%時進行的事件處理。你可以使用該事件來改變進度條的外觀，比如可以高亮它的狀态。

7.7.4　調用進度條的方法

進度條使用的方法與第6章講的可拖曳互動元件以及本章開頭講的折疊菜單微件的方法相似。參閱這些章節來獲得關于destroy、disable、enable、option和widget的詳細内容。

将進度條的值更新到一個指定值：

<code>$('#my-progress').progressbar('value', 50));</code>