jQuery 入门教程(37): jQuery UI Progressbar 示例

前面在介绍jQuery 入门教程(20): jQuery UI 基本工作过程时简要介绍过Progessbar用法。
在使用进度条时,如果可以预知进度的大小,可以设置Max大小,如果对于一些无法预约时间比如下载文件可以使用“中间状态”的状态条。

基本用法

1
2 <htmllang="en">
3 <head>
4 <metacharset="utf-8"/>
5 <title>jQuery UI Demostitle>
6 <linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/>
7 <scriptsrc="scripts/jquery-1.9.1.js">script>
8 <scriptsrc="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 <divid="progressbar">div>
20
21
22 body>
23 html>

显示进度

可以在显示进度条的同时显示当前的百分比(实际上可以显示任意文字),这是通过两个嵌套的div元素来实现,本例使用一个定时器来模拟进度条的动态效果。

1
2 <htmllang="en">
3 <head>
4 <metacharset="utf-8"/>
5 <title>jQuery UI Demostitle>
6 <linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/>
7 <scriptsrc="scripts/jquery-1.9.1.js">script>
8 <scriptsrc="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
46 head>
47 <body>
48
49 <divid="progressbar">
50 <divclass="progress-label">Loading...div>
51 div>
52
53
54 body>
55 html>

“中间过渡”状态条
可以通过设置 value=false 将进度条显示为“过渡”状态的进度条,此外也可以通过配置来修改进度条的颜色。

1
2 <htmllang="en">
3 <head>
4 <metacharset="utf-8"/>
5 <title>jQuery UI Demostitle>
6 <linkrel="stylesheet"href="themes/base/jquery-ui.css"/>
7 <scriptsrc="scripts/jquery-1.9.1.js">script>
8 <scriptsrc="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 <divid="progressbar">div>
46 <buttonid="numButton">Random Value - Determinatebutton>
47 <buttonid="falseButton">Indeterminatebutton>
48 <buttonid="colorButton">Random Colorbutton>
49
50
51 body>
52 html>

你可能感兴趣的:(jQuery 入门教程(37): jQuery UI Progressbar 示例)