本节书摘来自异步社区《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事件，最后向列表中插入一个选项卡。要小心，这个顺序是很重要的，否则没有任何效果。