<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
    <script>
        $(function () {
            $("#progressbar").progressbar({
                value: 37
            });
        });
    </script>
</head>
<body>

    <div id="progressbar"></div>

</body>
</html>

顯示進度

可以在顯示進度條的同時顯示當(dāng)前的百分比（實際上可以顯示任意文字），這是通過兩個嵌套的 div 元素來實現(xiàn)，本例使用一個定時器來模擬進度條的動態(tài)效果。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
    <style>
        .progress-label {
            float: left;
            margin-left: 50%;
            margin-top: 5px;
            font-weight: bold;
            text-shadow: 1px 1px 0 #fff;
        }
    </style>
    <script>
        $(function () {
            var progressbar = $("#progressbar"),
              progressLabel = $(".progress-label");

            progressbar.progressbar({
                value: false,
                change: function () {
                    progressLabel.text(progressbar.progressbar("value") + "%");
                },
                complete: function () {
                    progressLabel.text("Complete!");
                }
            });

            function progress() {
                var val = progressbar.progressbar("value") || 0;

                progressbar.progressbar("value", val + 1);

                if (val < 99) {
                    setTimeout(progress, 100);
                }
            }

            setTimeout(progress, 3000);
        });
    </script>
</head>
<body>

    <div id="progressbar">
        <div class="progress-label">Loading...</div>
    </div>

</body>
</html>

http://wiki.jikexueyuan.com/project/jquery-tutorial/images/48.png" alt="" />

“中間過渡”狀態(tài)條

可以通過設(shè)置 value=false 將進度條顯示為“過渡”狀態(tài)的進度條，此外也可以通過配置來修改進度條的顏色

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/base/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
    <script>
        $(function () {
            $("#progressbar").progressbar({
                value: false
            });
            $("button").on("click", function (event) {
                var target = $(event.target),
                  progressbar = $("#progressbar"),
                  progressbarValue
                      = progressbar.find(".ui-progressbar-value");

                if (target.is("#numButton")) {
                    progressbar.progressbar("option", {
                        value: Math.floor(Math.random() * 100)
                    });
                } else if (target.is("#colorButton")) {
                    progressbarValue.css({
                        "background": '#'
                            + Math.floor(Math.random()
                                * 16777215).toString(16)
                    });
                } else if (target.is("#falseButton")) {
                    progressbar.progressbar("option",
                        "value", false);
                }
            });
        });
    </script>
    <style>
        #progressbar .ui-progressbar-value {
            background-color: #ccc;
        }
    </style>
</head>
<body>

    <div id="progressbar"></div>
    <button id="numButton">Random Value - Determinate</button>
    <button id="falseButton">Indeterminate</button>
    <button id="colorButton">Random Color</button>

</body>
</html>

http://wiki.jikexueyuan.com/project/jquery-tutorial/images/49.png" alt="" />

上一篇：動畫效果下一篇：jQuery UI Dialog 示例（一）

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

jQuery UI Progressbar 示例

基本用法

顯示進度

“中間過渡”狀態(tài)條