你好,游客 登录 注册 搜索
背景:
阅读新闻

jQuery 入门教程(37): jQuery UI Progressbar 示例 - 引路蜂移动软件

[日期:2013-04-16] 来源:  作者: [字体: ]

前面在介绍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>

20130320011

“中间过渡”状态条
可以通过设置 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>

20130320012

 




收藏 推荐 打印 | 录入:admin | 阅读:
相关新闻