📌  相关文章
📜  jQuery UI |进度条方法(1)

📅  最后修改于: 2023-12-03 14:43:12.517000             🧑  作者: Mango

jQuery UI | 进度条方法

jQuery UI 是一个常用的 JavaScript 库，其中的进度条方法可以方便地在 Web 应用程序中添加进度条。

用法

使用 jQuery UI 的进度条方法需要先引入 jQuery 和 jQuery UI 库：

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
</head>

然后创建一个空的 div 元素，用于添加进度条：

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

最后使用 JavaScript 代码初始化进度条：

$(function() {
  $("#progressbar").progressbar({
    value: 50
  });
});

这段代码会在页面加载完成后执行，将 id 为 "progressbar" 的 div 元素转换为进度条，并将进度设置为 50%。

参数

进度条方法可以使用以下参数进行修改：

  • value：设置进度条的值，取值范围为 0 到 100，默认为 0。
  • max：设置进度条的最大值，取值范围为大于 0 的整数，默认为 100。
  • disabled：设置进度条是否禁用，取值为 true 或 false，默认为 false。
  • classes：自定义样式类。
  • complete：在进度条完成时执行的回调函数。
方法

进度条方法还提供了一些额外的方法，可以在 JavaScript 代码中使用：

  • value：获取或设置进度条的值。
  • disable：禁用进度条。
  • enable：启用进度条。
示例

下面的示例演示了如何使用进度条方法实现一个简单的上传进度条：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Upload Progress Bar Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
</head>
<body>
  <div id="progressbar"></div>
  <button id="upload-button">Upload</button>
  <script>
    $(function() {
      $("#progressbar").progressbar({
        value: false
      });

      $("#upload-button").on("click", function() {
        var progressbar = $("#progressbar");
        progressbar.progressbar("value", false);
        var progress = 0;
        var interval = setInterval(function() {
          progress = Math.min(progress + Math.random() * 20, 100);
          progressbar.progressbar("value", progress);
          if (progress >= 100) {
            clearInterval(interval);
          }
        }, 500);
      });
    });
  </script>
</body>
</html>

这个示例中包括一个上传按钮和一个进度条。当用户点击上传按钮时，进度条会开始增加，每次增加的值是一个随机数乘以 20，最大值不能超过 100。上传完成后，进度条会停止增加。