本节书摘来自异步社区《jquery、jquery ui及jquery mobile技巧与示例》一书中的第7章，第7.9节，作者：【荷】adriaan de jonge , 【美】phil dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
在本章的前面，我们引入了折叠菜单微件来组织较大的内容集，并且一次只显示一组内容。选项卡元素具有相似的功能，只存在一些细微的差别。虽然不一定总是正确的，但我还是要说，折叠菜单适合作为主界面侧边上的一个扩展元素，而选项卡元素最好用做主界面本身。
代码清单7-9将一个相对简单的html结构转换成一组选项卡。折叠菜单和选项卡元素之间的一个差异是，选项卡的标题列表和内容是彼此分开的，但折叠菜单的标题和内容是一体的。
代码清单7-9 将无序列表转换为选项卡面板
在代码清单7-9中，选项卡的内容在第27～35行的div元素中。你可以很容易地把这个例子修改为使用ajax从服务器获取内容。在这种情况下，你需要将href属性更改为服务器端的地址，它指向你想要显示在选项卡中的内容。内容需要和当前的html在同一服务器上。当你定义好这些引用时，在底层，选项卡组件会自动调用jquery的load``()函数去加载html。此功能在第5章中做过演示。
7.9.1 为选项卡元素添加样式
选项卡元素并没有对html做很多更改。它只是增加了很多类，通过这些类既可以用切换主题的方式也可以用自定义css样式的方式来装饰选项卡元素。
加粗的代码是由选项卡组件添加的。带底纹高亮显示的代码依赖于当前哪个选项卡是打开的。本例中，第一个选项卡是打开的。
7.9.2 设置选项卡的选项
正如jquery ui的其他微件，选项卡微件有几个选项可以设置，用来改变默认行为。表7-6给出了可用于选项卡微件的选项的代码示例以及描述。
7.9.3 捕获选项卡的事件
选项卡微件的事件可以在多个地方处理或触发。下面列出的代码片段可以作为处理事件的示例。
当一个新的选项卡微件初始化时进行的事件处理：
当一个不同的选项卡被点击时进行的事件处理：
当远端内容加载完成时进行的事件处理：
当一个不同的选项卡显示时进行的事件处理：
当一个选项卡被添加时进行的事件处理：
当一个选项卡被移除时进行的事件处理：
当一个以前被禁用的选项卡被启用时进行的事件处理：
当一个以前被启用的选项卡被禁用时进行的事件处理：
7.9.4 调用选项卡的方法
选项卡微件使用的方法与第6章讲的可拖曳交互组件以及对话框和折叠菜单微件相同。参阅这些章节来获得关于destroy、disable、enable、option和widget的详细内容。
在指定位置用指定的url和选项卡标签来添加一个新选项卡：
<code>$('#my-tabs').tabs('add', '/my-url', 'my tab label', 1);</code>
移除指定索引位置的选项卡：
<code>$('#my-tabs').tabs('remove', 1);</code>
启用指定索引值的选项卡：
<code>$('#my-tabs').tabs('enable', 1);</code>
禁用指定索引值的选项卡：
<code>$('#my-tabs').tabs('disable', 1);</code>
选定指定索引值的选项卡：
<code>$('#my-tabs').tabs('select', 1);</code>
重新加载指定选项卡的内容：
<code>$('#my-tabs').tabs('load', 1);</code>
在指定索引值的选项卡上加载指定的url：
<code>$('#my-tabs').tabs('url', 1, '/my-url');</code>
获取选项卡组件选项卡的个数：
<code>$('#my-tabs').tabs('length');</code>
中断所有的ajax请求：
<code>$('#my-tabs').tabs('abort');</code>
每隔2000毫秒自动循环选项卡。当用户选定了一个选项卡时停止循环，因为continuing 参数是false：
<code>$('#my-tabs').tabs('rotate', 2000, false);</code>