jQuery UI Progressbar option() 方法(1)

📌 相关文章

📜 jQuery UI Progressbar option() 方法(1)

📅 最后修改于: 2023-12-03 15:02:11.926000 🧑 作者: Mango

jQuery UI Progressbar option() 方法

jQuery UI Progressbar 是一个易用的进度条插件，可以方便地为网站添加进度条效果。option() 方法是 jQuery UI Progressbar 提供的一种设置或获取进度条选项的接口。本文将详细介绍 jQuery UI Progressbar option() 方法的使用方法和示例。

语法

下面是 jQuery UI Progressbar option() 方法的语法：

$(selector).progressbar("option", optionName)    // 获取指定选项的值
$(selector).progressbar("option", optionName, value)    // 设置指定选项的值
$(selector).progressbar("option", options)    // 设置多个选项的值

其中：

selector 表示进度条元素的选择器；
optionName 表示要设置或获取的选项名；
value 表示要设置的选项值；
options 表示要设置的多个选项，是一个键值对的对象。

参数

下面是 option() 方法的参数说明：

返回值

如果使用 option() 方法获取进度条选项的值，则会返回指定选项的当前值。如果使用 option() 方法设置进度条选项的值，则会返回 jQuery 对象，可以连缀调用其他方法。

选项列表

下面列出了 jQuery UI Progressbar 所支持的选项及其默认值。可以通过 option() 方法来设置或获取这些选项的值：

选项|类型|默认值|描述 -|-|-|- value|Number|0|进度条的当前值。取值范围为 0 到 100。 max|Number|100|进度条的最大值。取值范围为 0 到 100。 disabled|Boolean|false|禁用进度条，使其无法响应用户交互。 classes|Object|{}|自定义 CSS 类。可以通过它来定制进度条的外观和样式。 create|null|jQuery.noop|进度条创建时的回调函数。可以在这里进行一些初始化操作。 change|null|jQuery.noop|进度条的值发生变化时的回调函数。可以在这里响应进度条值的变化。 complete|null|jQuery.noop|进度条完成时的回调函数。可以在这里进行完成后的操作。

示例

以下示例演示了如何使用 option() 方法来设置和获取进度条选项：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery UI Progressbar option() 方法示例</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
  <div id="progressbar"></div>
  <button id="btn-start">开始</button>
  <button id="btn-stop">停止</button>
  <script>
    // 创建进度条
    $('#progressbar').progressbar({
      value: 0,
      change: function() {
        console.log('进度值更新：' + $(this).progressbar('option', 'value'));
      },
      complete: function() {
        console.log('进度条已完成');
      }
    });
    // 绑定按钮事件
    $('#btn-start').click(function() {
      // 开始加载
      $('#progressbar').progressbar('option', 'value', 20);
      setTimeout(function() {
        // 加载完成
        $('#progressbar').progressbar('option', 'value', 100);
      }, 5000);
    });
    $('#btn-stop').click(function() {
      // 停止加载
      $('#progressbar').progressbar('option', 'value', false);
    });
  </script>
</body>
</html>

该示例中，我们使用了 create、change 和 complete 三个回调函数。当进度条创建时，会执行 create 回调函数，并在控制台输出一条信息。当进度条的值发生变化时，会执行 change 回调函数，并输出进度值。当进度条完成时，会执行 complete 回调函数，并在控制台输出一条信息。

开启进度条加载时，我们使用 setTimeout 函数来模拟加载过程。在加载完成后，我们将进度条的值设置为 100，使进度条完成。我们还提供了一个停止按钮，可以在任何时候停止进度条的加载。为了方便演示，我们将加载时间设置为 5 秒钟。