JQuery UI - Progressbar Widget

要使用 JQuery UI 的 Progressbar Widget,首先必須引用 JQuery、JQueryUI。

1
2
3
4
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">


接著在畫面上放入一個 div element。

1
2
<div id="pb">
</div>


在 Javascript 中用 JQuery 找到該 div element,並叫用 progressbar 方法即可將該 div element 設為 progressbar。

1
2
3
$(function() {
$("#pb").progressbar();
});



若要做些細部設定,progressbar 有提供些 options 可供我們使用,像是 max 可以設定 progressbar 的最大值、value 可設定 progressbar 的當前值。

1
2
3
4
5
6
7
$(function() {
$("#pb").progressbar(
{
max:100,
value:50
});
});



若要主動觸發 progressbar,也提供了些 methods 讓我們使用,像是 value。

1
2
3
4
5
6
7
8
9
10
$(function() {
$("#pb").progressbar();
$("#increase").click(function()
{
var value = $("#pb").progressbar("value");
value += 10;
value %= 100;
$("#pb").progressbar("value", value);
});
});



此外,也有提供些事件讓我們監聽,像是 change。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function() {
$("#pb").progressbar(
{
change:function()
{
var value = $("#pb").progressbar("value");
$("#percentage").text(value + "%");
}
});
$("#increase").click(function()
{
var value = $("#pb").progressbar("value");
value += 10;
value %= 100;
$("#pb").progressbar("value", value);
});
});



最後這邊附上測試用的範例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<script>
$(function() {
$("#pb").progressbar(
{
max:100,
value:0,
change:function()
{
var value = $("#pb").progressbar("value");
$("#percentage").text(value + "%");
}
});
$("#increase").click(function()
{
var value = $("#pb").progressbar("value");
value += 10;
value %= 100;
$("#pb").progressbar("value", value);
});
});
</script>
</head>
<body>

<div id="percentage">0%</div>
<div id="pb">
</div>

<button id="increase">Increase</button>

</body>
</html>