jQuery进度条组件的用法（附带实例）

进度条被设计用来显示进度（即当前完成百分比），它通过 CSS 编码灵活调整大小，默认会缩放到适应父容器的大小。

一个确定的进度条只能在系统可以准确更新当前状态的情况下使用。一个确定的进度条不会从左向右填充，然后循环为初始空状态；如果不能计算实际当前状态，则使用不确定的进度条，以便提供用户反馈。

进度条部件使用 jQuery UI CSS 框架来定义它的外观和感观的样式。如果需要使用进度条指定的样式，则可以使用如下 CSS class 名称：

ui-progressbar：进度条的外层容器。该元素会为不确定的进度条额外添加一个 CSS class 名称 ui-progressbar-indeterminate；
ui-progressbar-value：该元素代表进度条的填充部分；
ui-progressbar-overlay：用于为不确定的进度条显示动画的覆盖层。

【实例】制作一个自定义更新的进度条。程序开发步骤如下：

新建一个 index.html 文件；
将 jQuery UI 文件夹 jquery-ui-1.13.2.custom 复制到 index.html 所在文件夹中。
使用 VS Code 打开 index.html 文件，在 index.html 文件中编写如下代码，实现在网页中自动加载的进度条：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="jquery-ui-1.13.2.custom/jquery-ui.css" />
<script src="jquery-ui-1.13.2.custom/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.13.2.custom/jquery-ui.js"></script>
<title>进度条（Progressbar）的使用</title>
<style>
.ui-progressbar {
    position: relative;
}
.progress-label {
    position: absolute;
    left: 50%;
    top: 4px;
    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("完成!");
        }
    });

    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">加载...</div></div>
</body>
</html>

使用 Chrome 浏览器运行 index.html 文件，进度条自动进行加载，效果如下图所示：

图 1 进度条的应用实例

jQuery进度条组件的用法（附带实例）

相关文章