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

最新推荐文章于 2023-07-30 16:00:31 发布

引路蜂

最新推荐文章于 2023-07-30 16:00:31 发布

阅读量7.7k

点赞数 3

分类专栏： jQuery JavaScript 教程 jQuery教程

教程同时被 3 个专栏收录

666 篇文章 1 订阅

订阅专栏

JavaScript

49 篇文章 0 订阅

订阅专栏

jQuery

48 篇文章 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>