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

淡淡的烟草味﹌ 2024-02-17 14:11 128阅读 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

发表评论

表情：
评论列表 （有 0 条评论，128人围观）

还没有评论，来说两句吧...

相关阅读