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

哈哈 阅读:265 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>

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

 
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号