jQuery UI Tabs widget() 方法

jQuery UI Tabs是基于jQuery的一个插件，用来创建选项卡。Tabs插件提供了多种样式和选项，可以很方便的自定义选项卡。

语法

$( ".selector" ).tabs( options );

其中，.selector指要创建选项卡的HTML元素。

选项

Tabs插件提供了很多选项，以便用户可以按照自己的喜好深度定制选项卡。

active

选项卡默认打开的页签的索引（从0开始），可以指定一个数字或者字符串。

$( ".selector" ).tabs({
  active: 2 // 第三个选项卡默认打开
});

collapsible

设置为 true 后，点击当前打开的选项卡将会关闭它。

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

event

设置触发选项卡改变事件的方法，默认是单击（click）选项卡。

$( ".selector" ).tabs({
  event: "mouseover"
});

heightStyle

控制选项卡高度的计算方式，支持三个值：auto、fill和 content。

• auto: 选项卡高度根据内容自动适应；
• fill: 选项卡高度填充父元素的高度；
• content: 选项卡高度根据内容的最大值计算出一个值作为所有选项卡的高度。

$( ".selector" ).tabs({
  heightStyle: "auto"
});

hide

设置页面加载后需要隐藏的选项卡（从0开始）的索引。

$( ".selector" ).tabs({
  hide: {
    effect: "explode",
    duration: 1000
  }
});

show

设置选项卡切换时的动画效果。

$( ".selector" ).tabs({
  show: {
    effect: "drop",
    duration: 500
  }
});

activate

选项卡每次改变时触发的事件。

$( ".selector" ).tabs({
  activate: function( event, ui ) {
    console.log(ui.newTab.index());
  }
});

方法

Tabs插件提供了多个方法，可以方便地控制选项卡。

.tabs( "disable", index )

禁用选项卡。

$( ".selector" ).tabs( "disable", 2 );

.tabs( "enable", index )

激活选项卡。

$( ".selector" ).tabs( "enable", 2 );

.tabs( "load", index )

从外部加载选项卡内容。

$( ".selector" ).tabs( "load", 2 );

.tabs( "option", optionName [, value ] )

获取或设置选项卡的选项。

$( ".selector" ).tabs( "option", "active", 1 );

.tabs( "refresh" )

重新计算选项卡高度。

$( ".selector" ).tabs( "refresh" );

.tabs( "widget" )

获取选项卡的jQuery对象。

$( ".selector" ).tabs( "widget" );

示例

下面是一个Tabs插件的完整示例：

<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>
  $(function() {
    $("#tabs").tabs({
      event: "mouseover"
    });
  });
</script>

上面代码创建了一个包含3个选项卡的页面，使用mouse事件触发选项卡的切换。通过这个示例，用户可以学习如何定制选项卡，并且加深对Tabs插件的使用方法的理解。