《jQuery UI 开发指南》——2.5 使用选项卡的示例
本节书摘来自异步社区《jQuery UI开发指南》一书中的第2章，第2.5节，作者：【美】Eric Sarrion 译者：罗晴明 ,包勇明更多章节内容可以访问云栖社区“异步社区”公众号查看。
2.5 使用选项卡的示例
在本节中，我们将运用所学到的有关选项卡的知识。
2.5.1 动态创建选项卡
我们想用JavaScript动态创建选项卡（及其内容）。在下面显示的代码中，首先用HTML代码创建了3个选项卡，然后用JavaScript添加了第4个：
请注意我们是如何将第一个tabs ()方法和第二个tabs ()方法链接起来的。第一个tabs ()方法是必需的，因为是它把编写的HTML代码转变成了显示选项卡的代码（使用jQuery UI自动添加的CSS类），第二个tabs ()方法执行了"add"操作，这将在列表的末尾添加选项卡。
jQuery UI创建了选项卡，也创建了与之内容相应的
结果如图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事件，最后向列表中插入一个选项卡。要小心，这个顺序是很重要的，否则没有任何效果。