一、前言

進度條可以向用戶顯示程式當前完成的百分比，讓使用者知道程式的進度，提高了使用者體驗。

二、最簡單的例子

首先引入樣式和js庫：

<link type="text/css" rel="Stylesheet" href="css/jquery-ui-1.7.2.custom.css" />

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></

可以使用div來作為顯示進度條的載體：

<div id="divProgressbar"></div>

將上面的div變成進度條：

<script type="text/javascript">

$(function(){

$("#divProgressbar").progressbar({value: 30});//初始話進度條並設定初始值為30

alert("當前值是: " + $("#divProgressbar").progressbar("option", "value"));//讀取進度條的當前值

});

</script>

一執行例子就明白

三、要進度條動起來怎麼辦？

做個小實驗，修改jquery程式碼如下：

<script type="text/javascript">

$(function(){

$("#divProgressbar").progressbar({value: 30});

alert("當前值是: " + $("#divProgressbar").progressbar("option", "value"));

$("#divProgressbar").progressbar({value: 60});

alert("當前值是: " + $("#divProgressbar").progressbar("option"

$("#divProgressbar").progressbar({value: 90});

alert("當前值是: " + $("#divProgressbar").progressbar("option", "value"));

});

</script>

執行，看是什麼結果，進度條沒變化，每次彈出框的值都是30吧！為什麼捏？因為.progressbar({value: 30})是用來初始化的上面已經在程式碼的註釋裡提到，在dialog那篇裡也說到同一個控制元件是不允許被多次初始化的，所以我們必須用其它的方法來修改進度條的當前值，jQuery提供了.progressbar("option", "value", 60)方法來設定當前值，這裡還可以發現，不在後面加數值引數的話就是讀取當前值。

再修改程式碼如下：

<script type="text/javascript">

$(function(){

$("#divProgressbar").progressbar({value: 30});

alert("當前值是: " + $("#divProgressbar").progressbar("option", "value"));

$("#divProgressbar").progressbar("option", "value", 60);

alert("當前值是: " + $("#divProgressbar").progressbar("option", "value"));

$("#divProgressbar").progressbar("option", "value", 90);

alert("當前值是: " + $("#divProgressbar").progressbar("option", "value"));

});

</script>

嘿嘿——進度條動起來了，而且彈出框的值也變化了。

四、可以實用的進度條

修改程式碼如下：

<script type="text/javascript">

$(function(){

updateProgressbarValue();//呼叫函式

function updateProgressbarValue(){

$("#divProgressbar").progressbar({value: 0}); //初始化進度條，如果已經初始化則會跳過

var newValue = $("#divProgressbar").progressbar("option", "value") + 3;//讀取進度條現有值並計算出新值

$("#divProgressbar").progressbar("option", "value", newValue);//設定進度條新值

setTimeout(updateProgressbarValue, 500);//使用setTimeout函式延遲呼叫updateProgressbarValue函式，延遲時間為500毫秒

}

});

</script>

這裡最重要的是使用了setTimeout來延遲呼叫函式，並且這是一個自巢狀函式，如果沒有終止它的話它將一直執行下去，這是不被允許的。

在setTimeout(updateProgressbarValue, 500);前加入下面的程式碼就知道了：

alert(newValue);

五、在適當的地方終止這個傻頭傻腦的程式

其實我們只需要在setTimeout(updateProgressbarValue, 500);前加一個判斷就ok了：

if(newValue <= 100)setTimeout(updateProgressbarValue, 10);

這樣我們就可以在進度條滿了後終止這個傻瓜繼續執行。

最終程式碼如下：

<script type="text/javascript">

$(function(){

updateProgressbarValue();

function updateProgressbarValue(){

$("#divProgressbar").progressbar({value: 0});

var newValue = $("#divProgressbar").progressbar("option", "value") + 10;

$("#divProgressbar").progressbar("option", "value", newValue);

alert(newValue);

if(newValue <= 100) setTimeout(updateProgressbarValue, 10);

}

});

</script>