JQUERY UI使用者介面設計

進度條

|

85

$("div#progressbar").progressbar ();

var value = 0;

var timer = setInterval (function ()

{

$("div#progressbar").progressbar ("value", value);

value++;

if (value > 100) clearInterval (timer);

}, 10);

</script>

在每次指定的時間間隔經過之後，都會呼叫

setInterval(delay, callback)

指定的回呼

函式（這邊是每隔 10 ms 一次）。

clearInterval(timer)

在進度條達到最大值 100 之後

會防止繼續呼叫回呼函式（圖 6-4）。

圖 6-4　進度條完全填滿

在完成的各個階段執行動作

除了遞增進度條之外，也能在不同的完成階段執行特定動作。讓我們用這個功能，在

每次改變填滿比例的時候，都以數字顯示目前完成的百分比（如圖 6-5 所示）。這是以

options.change

完成的，它會在進度條的填滿比例改變時通報新的數值。

<script src = jquery.js></script>

<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css

href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css ...