jQuery UI 选项卡 option() 方法

jQuery UI 是一个广泛使用的 JavaScript 库，它提供了大量可定制的 UI 组件和效果，其中之一就是选项卡组件。选项卡是一个常见的 UI 元素，用于实现不同的选项之间的切换。在 jQuery UI 中，选项卡组件通过 option() 方法实现多种可选的选项配置。

语法

option() 方法用于设置或获取选项卡组件的选项值。以下是 option() 方法的基本语法：

$(selector).tabs('option', optionName); // 获取值
$(selector).tabs('option', optionName, value); // 设置值

其中，selector 表示选项卡组件的选择器；optionName 表示选项卡组件的选项名称；value 表示选项卡组件的选项值。

示例

以下是一个选项卡组件的基本示例：

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

在上述示例中，我们创建了一个包括三个选项卡的选项卡组件。现在我们使用 option() 方法来设置选项卡组件的一些属性：

// 设置选项卡组件的初始选项
$('#myTabs').tabs({
  active: 0, // 选中第一个选项卡
  collapsible: true // 允许折叠选项卡
});

// 获取选项卡组件的当前选项
var active = $('#myTabs').tabs('option', 'active'); // 0

// 设置选项卡组件的某个选项
$('#myTabs').tabs('option', 'active', 2); // 选中第三个选项卡

在上述示例中，我们首先使用 tabs() 方法初始化了选项卡组件，并且将默认选项设置为第一个选项卡，同时允许折叠选项卡。然后，我们使用 option() 方法来获取当前选项的值，以及将选中的选项卡切换为第三个选项卡。

可选选项

以下是选项卡组件中可选的选项：

选项 | 类型 | 默认值 | 描述 --- | --- | --- | --- active | 数字 | 0 | 选项卡的初始选中项。可以使用 0、1、2 等数字，表示选项卡的索引位置，也可以使用字符串，表示选项卡的 ID。 collapsible | 布尔 | false | 是否允许折叠选项卡。如果为 true，则点击当前选项卡将折叠它，再次点击将展开它。 disabled | 数组或布尔 | [] | 禁用指定的选项卡。可以传递一个数字数组，表示禁用多个选项卡，或者传递一个布尔值 true，禁用所有选项卡，或者传递一个布尔值 false，不禁用任何选项卡。 event | 字符串 | 'click' | 触发选项卡切换的事件类型。可以使用 'click'、'mouseover' 等事件类型。 heightStyle | 字符串 | 'content' | 选项卡的高度样式。可以使用 'content'、'fill'、'auto' 等样式。 hide | 布尔或数字 | false | 是否使用动画隐藏选项卡。如果为 true，使用默认的动画效果隐藏选项卡，如果为数字，表示动画效果的持续时间。如果为 false，不使用动画效果。 show | 布尔或数字 | false | 是否使用动画显示选项卡。如果为 true，使用默认的动画效果显示选项卡，如果为数字，表示动画效果的持续时间。如果为 false，不使用动画效果。

以上选项中，active、collapsible、heightStyle 为常用选项，需要特别注意。还有其它选项，详情请参考 jQuery UI 选项卡组件文档。

总结

option() 方法是 jQuery UI 选项卡组件中一个非常重要的方法，它可以用于设置或获取选项卡组件的各种选项。本文介绍了 option() 方法的语法和示例，同时列出了一些常用的选项及其默认值。在实际开发中，我们应该根据实际需要选择和配置各种选项，以便得到满足特定需求的选项卡组件。