jQuery UI progressbar enable() 方法

jQuery UI progressbar中的enable()方法被用于启用进度条控件。当调用此方法时，将使进度条的状态恢复为可用状态，可以支持用户的交互操作。

语法

$(selector).progressbar("enable");

参数

无

示例说明

示例1

下面的示例代码中，当用户点击按钮时，进度条的状态将发生更改（停止滑动和交互操作）。当单击“启用”按钮时，将启用进度条。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Progressbar - Enable Method</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#progressbar" ).progressbar({
      value: false
    });

    $( "#stop" ).on( "click", function() {
      $( "#progressbar" ).progressbar( "option", "value", false );
    });

    $( "#enable" ).on( "click", function() {
      $( "#progressbar" ).progressbar( "enable" );
    });

    $( "#disable" ).on( "click", function() {
      $( "#progressbar" ).progressbar( "disable" );
    });
  } );
  </script>
</head>
<body>

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

<button id="stop">Stop Progress</button>
<button id="enable">Enable Progressbar</button>
<button id="disable">Disable Progressbar</button>

</body>
</html>

示例2

下面的示例代码中，显示了如何使用progressbar()函数将进度条初始化为已启用状态。在此示例中，使用enable()方法来重新启用进度条。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Progressbar - Enable Method</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#progressbar" ).progressbar();

    $( "#btnDisable" ).on( "click", function() {
      $( "#progressbar" ).progressbar( "disable" );
    });

    $( "#btnEnable" ).on( "click", function() {
      $( "#progressbar" ).progressbar( "enable" );
    });
  } );
  </script>
</head>
<body>

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

<button id="btnDisable">Disable</button>
<button id="btnEnable">Enable</button>

</body>
</html>

这些示例代码能够更好地帮助开发者理解如何使用progressbar()函数的enable()方法，以实现在进度条控件上启用和禁用用户交互。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery UI progressbar enable() 方法 - Python技术站

jQuery UI progressbar enable() 方法

语法

参数

示例说明

示例1

示例2

相关文章