本節書摘來自異步社群《jquery ui開發指南》一書中的第2章，第2.5節，作者：【美】eric sarrion 譯者：羅晴明 ,包勇明更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
在本節中，我們将運用所學到的有關頁籤的知識。
2.5.1 動态建立頁籤
我們想用javascript動态建立頁籤（及其内容）。在下面顯示的代碼中，首先用html代碼建立了3個頁籤，然後用javascript添加了第4個：
請注意我們是如何将第一個tabs ()方法和第二個tabs ()方法連結起來的。第一個tabs ()方法是必需的，因為是它把編寫的html代碼轉變成了顯示頁籤的代碼（使用jquery ui自動添加的css類），第二個tabs ()方法執行了"add"操作，這将在清單的末尾添加頁籤。
jquery ui建立了頁籤，也建立了與之内容相應的
。由于這内容是空的，是以添加了最後的appendto ()語句來添加内容。
結果如圖2-5所示。
2.5.2 使用ajax修改頁籤的内容
我們現在想使用伺服器傳回的html來初始化頁籤的内容。我們将使用php伺服器。
我們将使用"url"和"load"操作來修改第一個頁籤（索引為0）的内容。增加的代碼如粗體所示：
首先指定url，然後指定将以ajax來加載内容（要按此順序執行）。action.php檔案如下：
結果如圖2-6所示。
請注意，因為在html頁面裡使用了ajax請求，這個html頁面應該使用http協定（即位址欄中的url要以http開頭）來顯示，而不是簡單地把html檔案拖放到浏覽器中就行了。
接下來看一下如何把資訊通過ajax傳輸給伺服器。
2.5.3 通過ajax把資訊傳輸給伺服器
這個例子展示了如何通過ajax把資訊傳輸給伺服器，來修改相應頁籤的内容。在這個例子中，把一個人的名字和姓氏發送給伺服器，然後把伺服器傳回的内容顯示在頁籤的内容中。傳輸的資訊（名字和姓氏）是寫在ajaxoptions選項中的data屬性裡的（如粗體部分所示）：
接收發送參數和顯示頁籤内容的action.php檔案如下:
結果如圖2-7所示。
2.5.4 使用頁籤的add方法
我們想動态建立新的頁籤，并由ajax動态初始化該頁籤的内容。add事件（插入新頁籤時會觸發）可以完成這件事，比如發起插入内容的ajax請求（如粗體部分所示）：
"add"操作觸發了add事件，該事件會更新建立的頁籤的内容：
結果如圖2-8所示。
2.5.5 使用tabsadd事件
使用同樣的例子，隻是這次用bind()方法來管理事件。在添加頁籤時，jquery ui會觸發tabsadd事件（如粗體部分所示）：
首先建立頁籤，然後監聽tabsadd事件，最後向清單中插入一個頁籤。要小心，這個順序是很重要的，否則沒有任何效果。