博客

jQuery UI进度条widget()方法

  • Post category:jquery

jQuery UI进度条widget()方法

jQuery UI进度条widget()方法是一个用于创建进度条的jQuery UI小部件。该方法可以接受一个选项对象作为参数，用于自定义进度条的外观和行为。

语法

widget()方法的语法如下：

$(selector).progressbar(options);

其中，selector是要创建进度条的元素选择器，options是一个可选的选项对象，用于自定义进度条的外观和行为。

示例1：创建一个简单的度条

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery UI进度条widget()方法示例</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="//code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
  <script>
    $(function() {
      $("#progressbar").progressbar({
        value: 50
      });
    });
  </script>
</head>
<body>
  <div id="progressbar"></div>
</body>
</html>

在上面的示例中，我们首先引入了jQuery和jQuery UI库。然后，我们创建了一个<div>元素，用于显示进度条。最后，我们使用widget()方法创建了一个进度条，并将其附加到<div>元素上。我们使用value选项设置进度条的初始值为50。

示例2：自定义进度条的外观和行为

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery UI进度条widget()方法示例</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="//code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
  <script>
    $(function() {
      $("#progressbar").progressbar({
        value: 50,
        max: 100,
        change: function(event, ui) {
          $("#progress-label").text(ui.value + "%");
        },
        complete: function() {
          $("#progress-label").text("完成！");
        }
      });
    });
  </script>
</head>
<body>
  <div id="progressbar"></div>
  <div id="progress-label">50%</div>
</body>
</html>

在上面的示例中，我们首先引入了jQuery和jQuery UI库。然后，我们创建了一个<div>元素，用于显示进度条，以及一个<div>元素，用于显示进度条的百分比。最后，我们使用widget()方法创建了一个进度条，并将其附加到<div>元素上。我们使用value选项设置进度条的初始值为50，max选项设置进度条的最大值为100。我们还使用change事件和complete事件自定义了进度条的行为，当进度条的值发生变化时，我们将百分比显示在<div>元素中，当进度条完成时，我们将文本显示为“完成！”。

总结

jQuery UI进度条widget()方法是一个用于创建进度条的jQuery UI小部件。我们可以使用该方法创建一个简单的进度条，或者自定义进度条的外观和行为。在实际开发中，我们可以根据需要使用该方法，并进行相应的操作。

Tags: