jQuery 入门教程(37): jQuery UI Progressbar 示例
哈哈
阅读：648
2021-04-01 09:57:59
评论：0
前面在介绍jQuery 入门教程(20): jQuery UI 基本工作过程时简要介绍过Progessbar用法。
在使用进度条时，如果可以预知进度的大小，可以设置Max大小，如果对于一些无法预约时间比如下载文件可以使用“中间状态”的状态条。
基本用法
1 |
<!doctype html> |
2 |
<html lang="en"> |
3 |
<head> |
4 |
<meta charset="utf-8" /> |
5 |
<title>jQuery UI Demos</title> |
6 |
<link rel="stylesheet" href="themes/trontastic/jquery-ui.css" /> |
7 |
<script src="scripts/jquery-1.9.1.js"></script> |
8 |
<script src="scripts/jquery-ui-1.10.1.custom.js"></script> |
9 |
<script> |
10 |
$(function () {
|
11 |
$("#progressbar").progressbar({
|
12 |
value: 37 |
13 |
}); |
14 |
}); |
15 |
</script> |
16 |
</head> |
17 |
<body> |
18 |
19 |
<div id="progressbar"></div> |
20 |
21 |
22 |
</body> |
23 |
</html> |
显示进度
可以在显示进度条的同时显示当前的百分比（实际上可以显示任意文字），这是通过两个嵌套的div元素来实现，本例使用一个定时器来模拟进度条的动态效果。
1 |
<!doctype html> |
2 |
<html lang="en"> |
3 |
<head> |
4 |
<meta charset="utf-8" /> |
5 |
<title>jQuery UI Demos</title> |
6 |
<link rel="stylesheet" href="themes/trontastic/jquery-ui.css" /> |
7 |
<script src="scripts/jquery-1.9.1.js"></script> |
8 |
<script src="scripts/jquery-ui-1.10.1.custom.js"></script> |
9 |
<style> |
10 |
.progress-label {
|
11 |
float: left; |
12 |
margin-left: 50%; |
13 |
margin-top: 5px; |
14 |
font-weight: bold; |
15 |
text-shadow: 1px 1px 0 #fff; |
16 |
} |
17 |
</style> |
18 |
<script> |
19 |
$(function () {
|
20 |
var progressbar = $("#progressbar"), |
21 |
progressLabel = $(".progress-label"); |
22 |
23 |
progressbar.progressbar({
|
24 |
value: false, |
25 |
change: function () {
|
26 |
progressLabel.text(progressbar.progressbar("value") + "%"); |
27 |
}, |
28 |
complete: function () {
|
29 |
progressLabel.text("Complete!"); |
30 |
} |
31 |
}); |
32 |
33 |
function progress() {
|
34 |
var val = progressbar.progressbar("value") || 0; |
35 |
36 |
progressbar.progressbar("value", val + 1); |
37 |
38 |
if (val < 99) {
|
39 |
setTimeout(progress, 100); |
40 |
} |
41 |
} |
42 |
43 |
setTimeout(progress, 3000); |
44 |
}); |
45 |
</script> |
46 |
</head> |
47 |
<body> |
48 |
49 |
<div id="progressbar"> |
50 |
<div class="progress-label">Loading...</div> |
51 |
</div> |
52 |
53 |
54 |
</body> |
55 |
</html> |
“中间过渡”状态条
可以通过设置 value=false 将进度条显示为“过渡”状态的进度条，此外也可以通过配置来修改进度条的颜色。
1 |
<!doctype html> |
2 |
<html lang="en"> |
3 |
<head> |
4 |
<meta charset="utf-8" /> |
5 |
<title>jQuery UI Demos</title> |
6 |
<link rel="stylesheet" href="themes/base/jquery-ui.css" /> |
7 |
<script src="scripts/jquery-1.9.1.js"></script> |
8 |
<script src="scripts/jquery-ui-1.10.1.custom.js"></script> |
9 |
<script> |
10 |
$(function () {
|
11 |
$("#progressbar").progressbar({
|
12 |
value: false |
13 |
}); |
14 |
$("button").on("click", function (event) {
|
15 |
var target = $(event.target), |
16 |
progressbar = $("#progressbar"), |
17 |
progressbarValue |
18 |
= progressbar.find(".ui-progressbar-value"); |
19 |
20 |
if (target.is("#numButton")) {
|
21 |
progressbar.progressbar("option", {
|
22 |
value: Math.floor(Math.random() * 100) |
23 |
}); |
24 |
} else if (target.is("#colorButton")) {
|
25 |
progressbarValue.css({
|
26 |
"background": '#' |
27 |
+ Math.floor(Math.random() |
28 |
* 16777215).toString(16) |
29 |
}); |
30 |
} else if (target.is("#falseButton")) {
|
31 |
progressbar.progressbar("option", |
32 |
"value", false); |
33 |
} |
34 |
}); |
35 |
}); |
36 |
</script> |
37 |
<style> |
38 |
#progressbar .ui-progressbar-value {
|
39 |
background-color: #ccc; |
40 |
} |
41 |
</style> |
42 |
</head> |
43 |
<body> |
44 |
45 |
<div id="progressbar"></div> |
46 |
<button id="numButton">Random Value - Determinate</button> |
47 |
<button id="falseButton">Indeterminate</button> |
48 |
<button id="colorButton">Random Color</button> |
49 |
50 |
51 |
</body> |
52 |
</html> |
声明
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
