博客

jQuery UI进度条option()方法

  • Post category:jquery

jQuery UI是一个流行的JavaScript库，它为Web开发人员提供了多个用户界面小部件。其中之一是进度条。jQuery UI进度条小部件可以用来显示进度或加载状态。option()方法是一个jQuery UI进度条小部件的方法，用于设置小部件中可选选项的值。

基本语法

以下是使用option()方法设置可选选项的基本语法：

$(selector).progressbar( "option", optionName, value );

其中，selector表示选定进度条元素的jQuery选择器，optionName表示要更改的选项名称，value表示选项值。

示例1

考虑以下示例，其中进度条的初始值为30，每秒更新进度条值10。在进度条加载时，将更新进度条以反映加载进度：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>jQuery UI进度条示例</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
      $(document).ready(function() {
        // 初始化进度条
        $("#progressbar").progressbar({value: 30});
        // 更新进度条
        var progressbar = $( "#progressbar" );
        var progress = setInterval(function() {
          var value = progressbar.progressbar( "value" ) + 10;
          if (value > 100) {
            clearInterval(progress);
          } else {
            progressbar.progressbar( "option", "value", value );
          }
        }, 1000);
      });
    </script>
  </head>
  <body>
    <div id="progressbar"></div>
  </body>
</html>

在此示例中，我们使用了value选项，该选项设置了进度条的初始值为30。然后，我们使用option()方法访问value选项，并将其更新为进度条当前值加上10。这将在每个1秒的周期内重复，直到进度条到达100。

示例2

在下一个示例中，我们将使用相关选项来访问和更新进度条的disabled、max和value选项。我们添加改变按钮，使得可以通过单击按钮设置不同的选项值。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>jQuery UI进度条示例</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
      $( function() {
        var progressbar = $( "#progressbar" ),
          progressLabel = $( ".progress-label" );

        progressbar.progressbar({
          value: false,
          change: function() {
            progressLabel.text( "进度：" + progressbar.progressbar( "value" ) + "%" );
          },
          complete: function() {
            progressLabel.text( "加载完成！" );
          }
        });

        $( "#progressbar-toggle" ).on( "click", function() {
          if ( progressbar.progressbar( "option", "disabled" ) ) {
            progressbar.progressbar( "option", "disabled", false );
          } else {
            progressbar.progressbar( "option", "disabled", true );
          }
        });

        $( "#progressbar-value" ).on( "click", function() {
          var val = $( "#progressbar-value" ).val();
          progressbar.progressbar( "option", "value", parseInt(val) );
        });

        $( "#progressbar-max" ).on( "click", function() {
          var val = $( "#progressbar-max" ).val();
          progressbar.progressbar( "option", "max", parseInt(val) );
        });
      });
    </script>
  </head>
  <body>
    <button id="progressbar-toggle">切换禁用</button>
    <label for="progressbar-value">设置值：</label>
    <input type="number" id="progressbar-value" value="50">

    <label for="progressbar-max">设置最大值：</label>
    <input type="number" id="progressbar-max" value="100">

    <div id="progressbar"></div>
    <div class="progress-label">进度：0%</div>
  </body>
</html>

在此示例中，我们添加了三个不同的按钮，每个按钮都更新了进度条的一个不同的选项。这些选项是：

  • disabled：禁用进度条（true）或启用进度条（false）。
  • max：设置进度条的最大值。
  • value：设置进度条当前值。

为了使用这些选项，我们使用了option()方法来访问并更改每个不同选项上的值。

以上是有关jQuery UI进度条option()方法的完整攻略。

Tags: