本節書摘來自異步社群《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>