JQuery UI - Progressbar Widget

默认使用效果

demo01.png

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

在 HTML 代码中我们只是简单的定义了一个div，和之前介绍的方法一样，我们也是简单的调用一个 progressbar() 方法即可 显示出图片中的效果。

<script>
    $(document).ready(function () {
        $("#progressbar").progressbar({
            value: 50
        });
    })
</script>

这里，我们将进度条的值设置成了50，当然这个值可以随意指定。现在我们看到的还是一个静态的效果，显然是不能满足我们的，一个静态的进度条对我们而言毫无意义，下面就来看看动态的效果该如何实现。

动态加载

demo02.gif

可见，这个效果还是很有利用价值的，下面我们就看看是怎么做到的。

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

在这里，我们又嵌套了一个 div 标签，用于摆放加载时进度的变化。下面我们需要书写 CSS 样式，将 progressbar-label 中的值放到进度条当中去。

<style>
    #progressbar {
        width: 320px;
        position: relative;
    }

    #progressbar-label {
        position: absolute;
        top: 6px;
        left: 48%;
    }
</style>

我们将 left 属性设置成了 48%，并没有设置成居中，因为我们还有一个文字宽度，如果设置成 50%，就显得靠右了。其实，我也不知道怎么可以将这个文字设置成居中，我尝试了好几个属性，但是都失败了。如果有人知道，请在下方留言教教我，万分感谢。

<script>
    $(document).ready(function () {
        var progressbar = $("#progressbar");
        var progressbarLabel = $("#progressbar-label");

        progressbar.progressbar({
            value: false,
            change: function () {
                progressbarLabel.text(progressbar.progressbar("value") + "%");
            },
            complete: function () {
                progressbarLabel.text("100%");
            }
        })

        function progress() {
            var value = progressbar.progressbar("value") || 0;
            progressbar.progressbar("value", value + 2);

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

        setTimeout(progress, 1000);
    })
</script>

1.将 progressbar 的 value 设置成 false，这么设置有什么效果呢？看上面的图片，在刚开始的时候一个动态的波浪效果，这么设置就是让这个效果出现。

2.在 progress() 方法中我们使用了一个递归调用，也就是每隔 0.1s 调用一下自身方法，进行更新 progressbar 的值。在方法的外面，我们将延迟时间设置成了 1s ， 主要是为了将刚开始加载的动态效果显示的更明显一些。

弹出框下载效果

demo03.gif

<div id="dialog" title="下载">
    <div id="progressbar-label">正在加载</div>
    <div id="progressbar"></div>
</div>

<button type="button" id="openBtn">打开</button>

关于 html 代码我们就不再对其进行讲解，直接跳过，去看 JS 代码。

<script>
    $(document).ready(function () {
        var dialog = $("#dialog");
        var progressbar = $("#progressbar");
        var progressLabel = $("#progressbar-label");
        var progressTimer;
        dialogButtons = [{
            text: "取消下载",
            click: closeDownload
        }];

        dialog.dialog({
            autoOpen: false,
            modal: true,
            resizable: false,
            buttons: dialogButtons
        });

        $("#openBtn").button().on("click", function () {
            dialog.dialog("open");
            setTimeout(progress, 2000);
        })

        progressbar.progressbar({
            value: false,
            change: function () {
                progressLabel.text("正在下载 : " + progressbar.progressbar("value") + "%");
            },
            complete: function () {
                progressLabel.text("下载完成");
                dialog.dialog("option", "buttons", [{
                    text: "关闭",
                    click: closeDownload
                }]);
            }

        })

        function progress() {
            var value = progressbar.progressbar("value") || 0;
            progressbar.progressbar("value", value + 2);
            if (value <= 99) {
                progressTimer = setTimeout(progress, 30);
            }
        }

        function closeDownload() {
            clearTimeout(progressTimer);
            dialog.dialog("close");
            progressbar.progressbar("value", false);
            progressLabel.text("正在加载");
        }


    })
</script>

1.一开始，我们声明了几个变量，接下来我们就可以通过变量对页面标签进行操作。

2.以上效果其实就是 Dialog 和 Progressbar 的使用，大多数属性在以上我们都已经介绍过了，下面我们针对逻辑进行讲解。首先，将弹出框设置成 关闭状态，对 openBtn 绑定点击事件，当点击触发的时候，将弹出框打开，并且此时开始启动 setTimeout()方法，开始让 Progressbar 进行加载，至于在其他地方我们对 ProgressLabel 文字的修改和对Dialog 按钮文字的修改，我们就不再进行讲解。

注意到，我们上面的Progressbar 的颜色不再是默认的灰色了，这是怎么修改的呢？这个属性我们可以在 CSS 中就行修改。

<style>
    #progressbar-label {
        margin-bottom: 20px;
        font-weight: bold;
    }

    .ui-dialog-titlebar-close {
        display: none;
    }

    #progressbar .ui-progressbar-value{
        background-color: aquamarine;
    }
</style>

1.第一处是对 ProgressLabel 进行位置和字体设定。

2.第二处是将弹出框右上角的关闭按钮进行隐藏。

3.第三处就是将Progressbar 的背景颜色进行改变，我们可以将其改编成任意值。