本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第7章，第7.9节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
7.9 技巧：使用选项卡微件导航页面
在本章的前面，我们引入了折叠菜单微件来组织较大的内容集，并且一次只显示一组内容。选项卡元素具有相似的功能，只存在一些细微的差别。虽然不一定总是正确的，但我还是要说，折叠菜单适合作为主界面侧边上的一个扩展元素，而选项卡元素最好用做主界面本身。
代码清单7-9将一个相对简单的HTML结构转换成一组选项卡。折叠菜单和选项卡元素之间的一个差异是，选项卡的标题列表和内容是彼此分开的，但折叠菜单的标题和内容是一体的。
代码清单7-9 将无序列表转换为选项卡面板
00 <!DOCTYPE html>
01
02 <html lang="en">
03 <head>
04 <title>jQuery UI Tabs</title>
05 <link type="text/css" rel="stylesheet" href=
06 "http://code.jquery.com/ui/1.8.16/themes/base/jquery-ui.css">
07 <style>
08 body {
09 font-size: 12px;
10 }
11 </style>
12 </head>
13 <body>
14
15 <div id="my-tabs">
16 <ul>
17 <li>
18 <a href="#first">First</a>
19 </li>
20 <li>
21 <a href="#second">Second</a>
22 </li>
23 <li>
24 <a href="#third">Third</a>
25 </li>
26 </ul>
27 <div id="first">
28 This is the text of the first tab
29 </div>
30 <div id="second">
31 You have switched to the second tab
32 </div>
33 <div id="third">
34 And finally, you have switched to the third tab
35 </div>
36 </div>
37
38 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
39 <script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js">
40 </script>
41
42 <script>
43 // 请将下列代码移至一个外部的.js文件中
44 $(document).ready(function() {
45
46 $('#my-tabs').tabs();
47
48 });
49 </script>
50 </body>
51 </html>
在代码清单7-9中，选项卡的内容在第27～35行的div元素中。你可以很容易地把这个例子修改为使用AJAX从服务器获取内容。在这种情况下，你需要将href属性更改为服务器端的地址，它指向你想要显示在选项卡中的内容。内容需要和当前的HTML在同一服务器上。当你定义好这些引用时，在底层，选项卡组件会自动调用jQuery的load``()函数去加载HTML。此功能在第5章中做过演示。
7.9.1 为选项卡元素添加样式
选项卡元素并没有对HTML做很多更改。它只是增加了很多类，通过这些类既可以用切换主题的方式也可以用自定义CSS样式的方式来装饰选项卡元素。
<div id="my-tabs"
class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix
ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected
ui-state-active">
<a href="#first">First</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="#second">Second</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="#third">Third</a>
</li>
</ul>
<div id="first" class="ui-tabs-panel ui-widget-content
ui-corner-bottom">
This is the text of the first tab
</div>
<div id="second" class="ui-tabs-panel ui-widget-content
ui-corner-bottom ui-tabs-hide" >
You have switched to the second tab
</div>
<div id="third" class="ui-tabs-panel ui-widget-content
ui-corner-bottom ui-tabs-hide" >
And finally, you have switched to the third tab
</div>
</div>
加粗的代码是由选项卡组件添加的。带底纹高亮显示的代码依赖于当前哪个选项卡是打开的。本例中，第一个选项卡是打开的。
7.9.2 设置选项卡的选项
正如jQuery UI的其他微件，选项卡微件有几个选项可以设置，用来改变默认行为。表7-6给出了可用于选项卡微件的选项的代码示例以及描述。
7.9.3 捕获选项卡的事件
选项卡微件的事件可以在多个地方处理或触发。下面列出的代码片段可以作为处理事件的示例。
当一个新的选项卡微件初始化时进行的事件处理：
$('#my-tabs').tabs({create: function(event, ui) {
// 事件处理
}});
//或
$('#my-tabs')
.on('tabscreate', function(event, ui) {
// 事件处理
})
.tabs();
当一个不同的选项卡被点击时进行的事件处理：
$('#my-tabs').tabs({select: function(event, ui) {
// 事件处理
}});
//或
$('#my-tabs').tabs()
.on('tabsselect', function(event, ui) {
// 事件处理
});
当远端内容加载完成时进行的事件处理：
$('#my-tabs').tabs({load: function(event, ui) {
// 事件处理
}});
//或
$('#my-tabs').tabs()
.on('tabsload', function(event, ui) {
// 事件处理
});
当一个不同的选项卡显示时进行的事件处理：
$('#my-tabs').tabs({show: function(event, ui) {
// 事件处理
}});
//或
$('#my-tabs').tabs()
.on('tabsshow', function(event, ui) {
// 事件处理
});
当一个选项卡被添加时进行的事件处理：
$('#my-tabs').tabs({add: function(event, ui) {
// 事件处理
}});
//或
$('#my-tabs').tabs()
.on('tabsadd', function(event, ui) {
// 事件处理
});
当一个选项卡被移除时进行的事件处理：
$('#my-tabs').tabs({remove: function(event, ui) {
// 事件处理
}});
//或
$('#my-tabs').tabs()
.on('tabsremove', function(event, ui) {
// 事件处理
});
当一个以前被禁用的选项卡被启用时进行的事件处理：
$('#my-tabs').tabs({enable: function(event, ui) {
// 事件处理
}});
//或
$('#my-tabs').tabs()
.on('tabsenable', function(event, ui) {
// 事件处理
});
当一个以前被启用的选项卡被禁用时进行的事件处理：
$('#my-tabs').tabs({disable: function(event, ui) {
// 事件处理
}});
//或
$('#my-tabs').tabs()
.on('tabsdisable', function(event, ui) {
// 事件处理
});
7.9.4 调用选项卡的方法
选项卡微件使用的方法与第6章讲的可拖曳交互组件以及对话框和折叠菜单微件相同。参阅这些章节来获得关于destroy、disable、enable、option和widget的详细内容。
在指定位置用指定的URL和选项卡标签来添加一个新选项卡：
$('#my-tabs').tabs('add', '/my-url', 'My Tab Label', 1);
移除指定索引位置的选项卡：
$('#my-tabs').tabs('remove', 1);
启用指定索引值的选项卡：
$('#my-tabs').tabs('enable', 1);
禁用指定索引值的选项卡：
$('#my-tabs').tabs('disable', 1);
选定指定索引值的选项卡：
$('#my-tabs').tabs('select', 1);
重新加载指定选项卡的内容：
$('#my-tabs').tabs('load', 1);
在指定索引值的选项卡上加载指定的URL：
$('#my-tabs').tabs('url', 1, '/my-url');
获取选项卡组件选项卡的个数：
$('#my-tabs').tabs('length');
中断所有的AJAX请求：
$('#my-tabs').tabs('abort');
每隔2000毫秒自动循环选项卡。当用户选定了一个选项卡时停止循环，因为continuing 参数是false：
$('#my-tabs').tabs('rotate', 2000, false);
