博客

jQuery UI选项方法

  • Post category:jquery

以下是关于 jQuery UI 选项方法的完整攻略：

jQuery UI 选项方法

在 jQuery UI 中，可以使用选项方法来获取或设置控件的选项。这些选项可以控制控件的行为和外观。

语法

获取选项的值：

$(selector).widget("option", optionName);

其中，selector 是控件的选择器，optionName 是要获取的选项的名称。

设置选项的值：

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

其中，selector 是控件的选择器，optionName 是要设置的选项的名称，value 是要设置的选项的值。

示例一：获取和设置选项

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI 选项方法</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery/ui/1.13.0/jquery-ui.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#slider").slider({
        min: 0,
        max: 100,
        value: 50
      });
      $("#get").click(function(){
        var value = $("#slider").slider("option", "value");
        alert("当前值：" + value);
      });
      $("#set").click(function(){
        $("#slider").slider("option", "value", 75);
      });
    });
  </script>
</head>
<body>
  <div id="slider"></div>
  <button id="get">获取值</button>
  <button id="set">设置值</button>
</body>
</html>

这将创建一个带有滑块和两个按钮的页面。当用户单击“获取值”按钮时，将使用 option() 方法获取滑块的当前值，并在弹出窗口中显示结果。当用户单击“设置值”按钮时，将使用 option() 方法将滑块的值设置为 75。

示例二：设置多个选项

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI 选项方法</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery/ui/1.13.0/jquery-ui.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#accordion").accordion({
        collapsible: true,
        active: false,
        heightStyle: "content"
      });
      $("#options").click(function(){
        $("#accordion").accordion("option", {
          collapsible: false,
          active: 1,
          heightStyle: "fill"
        });
      });
    });
  </script>
  <style>
    h3 {
      background-color: #ccc;
      padding: 10px;
      margin: 0;
    }
    .ui-accordion-content {
      padding: 10px;
    }
  </style>
</head>
<body>
  <div id="accordion">
    <h3>第一部分</h3>
    <div>
      <p>这是第一部分的内容。</p    </div>
    <h3>第二部分</h3>
    <div>
      <p>这是第二部分的内容。</p>
    </div>
    <h3>第三部分</h3>
    <div>
      <p>这是第三部分的内容。</p>
 </div>
  </div>
  <button id="options">设置选项</button>
</body>
</html>

这将创建一个带有三个折叠面板和一个按钮的页面。当用户单击“设置选项”按钮时，将使用 option() 方法将折叠面板的 collapsible 选项设置为 false，active 选项设置为 1，heightStyle 选项设置为 “fill”。

总结：

在 jQuery UI 中，可以使用选项方法来获取或设置控件的选项。这些选项可以控制控件的行为和外观。

以上是关于 jQuery UI 选项方法的完整攻略。

Tags: