jQuery UI 选项卡小部件完整参考

简介

jQuery UI 选项卡小部件是一个可用于创建选项卡式导航菜单的插件，它具有许多自定义选项和事件。

如何使用

基本用法

使用选项卡小部件非常简单，只需选择一个包含选项卡实例的HTML元素，然后使用以下代码初始化选项卡小部件：

$(function() {
  $("#tabs").tabs();
});

这将创建一个基本的选项卡实例，其中“＃tabs”是包含选项卡HTML的元素的ID。

HTML 结构

每个选项卡由一个包含标签和关联内容的

<div id="tabs">
  <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">选项卡1的内容</div>
  <div id="tab-2">选项卡2的内容</div>
  <div id="tab-3">选项卡3的内容</div>
</div>

选项卡的标题是使用元素中的文本创建的。内容实际上是使用ID属性分隔的

选项

该插件提供了各种选项来自定义选项卡的行为和外观。以下是一些常用选项:

active

指定应默认激活哪个选项卡（从0开始索引）。如果没有指定，则使用第一个选项卡。

$(function() {
  $("#tabs").tabs({
    active: 1
  });
});

collapsible

如果设置为 true，则当单击已选中的选项卡时，将关闭该选项卡的内容。设置为false时，则没有任何操作。

$(function() {
  $("#tabs").tabs({
    collapsible: true
  });
});

heightStyle

指定选项卡整体高度的计算方法。可选值包括 auto、fill、content

$(function() {
  $("#tabs").tabs({
    heightStyle: "fill"
  });
});

事件

选项卡小部件提供的事件是以下事件：

create

在选项卡小部件初始化完成时触发。

$(function() {
  $("#tabs").on("tabscreate", function(event, ui) {
    console.log("Tabs created");
  });
});

activate

在选项卡激活时触发。

$(function() {
  $("#tabs").on("tabsactivate", function(event, ui) {
    console.log(ui.newTab.index());
  });
});

beforeActivate

在选项卡激活之前触发。

$(function() {
  $("#tabs").on("tabsbeforeactivate", function(event, ui) {
    console.log(ui.newTab.index());
  });
});

方法

选项卡小部件提供的方法如下：

enable

启用指定选项卡。

$("#tabs").tabs("enable", 1);

disable

禁用指定选项卡。

$("#tabs").tabs("disable", 1);

add

添加一个新的选项卡。

$("#tabs").tabs("add", "#new-tab-id", "New Tab Title", 3);

remove

在给定位置上删除选项卡。

$("#tabs").tabs("remove", 2);

结论

jQuery UI 选项卡小部件是一个灵活且易于使用的工具，可创建交互式选项卡式导航菜单。它具有许多自定义选项和事件，可满足各种需求。