博客

jQuery UI Tabs option()方法

  • Post category:jquery

以下是关于 jQuery UI Tabs option() 方法的详细攻略：

jQuery UI Tabs option() 方法

option() 方法用于获取或设置选项卡小部件的选项。您可以使用该方法来动态更改选项卡的选项，例如更改选项卡的高度样式或禁用某个选项卡。

语法

$(selector).tabs( "option", optionName ); // 获取选项
$(selector).tabs( "option", optionName, value ); // 设置选项

参数

  • optionName：一个字符串，表示要获取或设置的选项的名称。
  • value：一个值，表示要设置的选项的值。

示例一：获取选项卡小部件的选项

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">选项卡 1</a></li>
    <li><a href="#tabs-2">选项卡 2</a></li>
    <li><a href="#tabs-3">选项卡 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>这是选项卡 1 的内容。</p>
  </div>
  <div id="tabs-2">
    <p>这是选项卡 2 的内容。</p>
  </div>
  <div id="tabs-3">
    <p>这是选项卡 3 的内容。</p>
  </div>
</div>

<script>
var heightStyle = $( "#tabs" ).tabs( "option", "heightStyle" ); // 获取选项卡高度样式
console.log( heightStyle ); // 输出 "content"
</script>

这将创建一个选项卡小部件，并获取选项卡的高度样式选项。

示例二：设置选项卡小部件的选项

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">选项卡 1</a></li>
    <li><a href="#tabs-2">选项卡 2</a></li>
    <li><a href="#tabs-3">选项卡 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>这是选项卡 1 的内容。</p>
  </div>
  <div id="tabs-2">
    <p>这是选项卡 2 的内容。</p>
  </div>
  <div id="tabs-3">
    <p>这是选项卡 3 的内容。</p>
  </div>
</div>

<script>
$( "#tabs" ).tabs( "option", "heightStyle", "fill" ); // 设置选项卡高度样式为 "fill"
</script>

这将创建一个选项卡小部件，并将选项卡的高度样式选项设置为 “fill”。

总结：

option() 方法用于获取或设置选项卡小部件的选项。您可以使用该方法来动态更改选项卡的选项，例如更改选项卡的高度样式或禁用某个选项卡。

以上是关于 jQuery UI Tabs option() 方法的详细攻略，包括语法和示例。

Tags: