详情
本书每章开始先介绍组件的基本用法，然后用通俗易懂的语言解释组件的配置及事件选项，最后通过精挑细选、循序渐进的示例帮读者巩固所学的知识点。本书涵盖选项卡管理、折叠菜单、对话框、按钮、滑块、自动补全、拖放、视觉特效等内容。
书名：jQuery UI 开发指南
ISBN：978-7-115-29523-1
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
• 著 [美] Eric Sarrion
译 罗晴明 包勇明
责任编辑 杨海玲
• 人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
• 读者服务热线：(010)81055410
反盗版热线：(010)81055315
Copyright ©2012 by O’Reilly Media, Inc.
Simplified Chinese Edition, jointly published by O’Reilly Media, Inc. and Posts & Telecom Press, 2012. Authorized translation of the English edition, 2012 O’Reilly Media, Inc., the owner of all rights to publish and sell the same.
All rights reserved including the rights of reproduction in whole or in part in any form.
本书中文简体版由O’Reilly Media, Inc.授权人民邮电出版社出版。未经出版者书面许可，对本书的任何部分不得以任何方式复制或抄袭。
版权所有，侵权必究。
本书是jQuery UI的快速开发指南，全面介绍jQuery UI如何改进HTML页面展示，内容包括jQuery UI 1.8版本的下列扩展特性：选项卡管理、折叠菜单、对话框、按钮、进度条、滑块、日历、自动补全、拖放管理、选择元素、缩放、元素调序以及新的视觉特效等。
本书共14章，讲述了jQuery UI的所有功能。作者用精简的代码展示了jQuery UI组件的使用方法，挑选出最为重要的配置选项和组件事件进行详细解释说明。精选的示例循序渐进、由易到难，从假设问题到解决问题，显示了作者挖掘jQuery UI功能的思考过程。
本书适合Web开发人员及设计人员阅读。无论是jQuery UI的初学者还是有一定经验的开发人员，本书都是极好的技术参考书。
本书是由O’Reilly出版的第一本关于jQuery UI的书籍。
前端技术已经受到越来越多程序员的青睐，相信有很多前端工程师，包括我自己，都渴望在短时间内学习并掌握jQuery UI，特别是在项目开始时犹豫是否使用jQuery UI的时候，本书对于学习jQuery UI会有极大的帮助。
jQuery UI的官方文档有些地方写得过于简单，没有详细解释，不易理解。本书作者Eric Sarrion在每章的开始先介绍组件的基本使用方法，然后用通俗易懂的语言详细说明组件的配置及事件选项，最后通过精挑细选、循序渐进的示例帮助读者巩固学到的知识点。我在翻译此书的过程中收获颇丰，对jQuery UI的细节部分和使用场景都有了更深入的理解。本书是对jQuery UI官方文档的强有力的补充和说明，可以作为实际开发时的参考手册。
本书讲解的jQuery UI版本是1.8.16，而非官方最新版本（1.8.23）。可能有朋友担心会不会过时了？几乎所有的技术类书籍都难以避免这样的问题，图书出版的速度永远赶不上技术更新的速度。对于本书（相信还有很多其他书）这种担心是多余的。本书讲解的内容和最新版本的几乎是一样的。本书能够帮助读者掌握jQuery UI的使用方法，使初学者能够快速入门，全面掌握jQuery UI，使有经验的读者在使用jQuery UI时能够更加得心应手，提高开发效率，丰富页面展示效果，提升用户体验。
如果你刚刚接触jQuery UI，希望系统地学习jQuery UI，本书是极佳的选择。如果你是一位“久经沙场”的开发人员，并已经熟读了jQuery UI的官方文档，我依然向你推荐这本书，感受一下别人眼中的jQuery UI，同时也不失学习的乐趣。
本书也适合非开发人员阅读，比如设计师。不是说让设计师来做开发的工作，而是从中学习“标准”UI组件的视觉外观和交互逻辑，在设计页面时能开拓思路，设计出更加专业和利于用户交互的界面。
我在一个很偶然的情况下得到了翻译此书的机会。在翻译过程中，我力求在文字与内容上忠实原著，并对每一个技术点都认真进行了验证核对，对每一句话都推敲再三，生怕表达不清而误导了读者。但本人水平有限，加之时间仓促，书中难免有纰漏之处，敬请广大读者批评指正。
本书的翻译由罗晴明和我合作完成，感谢杨海玲老师在翻译过程中给予的充分信任和支持，感谢出版社编辑们认真仔细的编校工作。
包勇明
2012年9月 于上海
包勇明 盛大创新院资深前端工程师，有丰富的前端开发经验，热爱前端和互联网技术，并以无限的热情投身和致力于前端工作，对前端和用户体验相关的一切技术都感兴趣，深知前端在当前互联网中的重要位置及历史使命。
罗晴明 资浅前端开发者。曾就职于网易和搜狐视频。85后宅男，会说中式英文及“l-n不敏感”普通话。笑点比断点诡异。热衷于在生活的闭包里寻觅泄漏的乐趣。
O’Reilly Media通过图书、杂志、在线服务、调查研究和会议等方式传播创新知识。自1978年开始，O’Reilly一直都是前沿发展的见证者和推动者。超级极客们正在开创着未来，而我们关注真正重要的技术趋势——通过放大那些“细微的信号”来刺激社会对新科技的应用。作为技术社区中活跃的参与者，O’Reilly的发展充满了对创新的倡导、创造和发扬光大。
O’Reilly为软件开发人员带来革命性的“动物书”；创建第一个商业网站（GNN）；组织了影响深远的开放源代码峰会，以至于开源软件运动以此命名；创立了Make杂志，从而成为DIY革命的主要先锋；公司一如既往地通过多种形式缔结信息与人的纽带。O’Reilly的会议和峰会集聚了众多超级极客和高瞻远瞩的商业领袖，共同描绘出开创新产业的革命性思想。作为技术人士获取信息的选择，O’Reilly现在还将先锋专家的知识传递给普通的计算机用户。无论是通过书籍出版，在线服务或者面授课程，每一项O’Reilly的产品都反映了公司不可动摇的理念——信息是激发创新的力量。
“O’Reilly Radar博客有口皆碑。”
——Wired
“O’Reilly凭借一系列（真希望当初我也想到了）非凡想法建立了数百万美元的业务。”
——Business 2.0
“O’Reilly Conference是聚集关键思想领袖的绝对典范。”
——CRN
“一本O’Reilly的书就代表一个有用、有前途、需要学习的主题。”
——Irish Times
“Tim是位特立独行的商人，他不光放眼于最长远、最广阔的视野并且切实地按照Yogi Berra的建议去做了：‘如果你在路上遇到岔路口，走小路（岔路）。’回顾过去Tim似乎每一次都选择了小路，而且有几次都是一闪即逝的机会，尽管大路也不错。”
——Linux Journal
jQuery是一个很流行的JavaScript库，可以通过插件进行功能扩展。有些插件，尤其是那些管理用户界面的插件，都已经被收集到jQuery UI库中了。这些插件有助于用户交互，如果你只使用jQuery，管理这些交互功能会更加简单。
本书涵盖了jQuery UI 1.8版本中的以下扩展：
所有使用jQuery的人都应该阅读这本书！对于那些想改进网站的用户界面和想用新功能来丰富网站的朋友，本书尤其值得一读。
jQuery UI里面的每个功能组件（选项卡、折叠菜单等）都将单独分章阐述。每章的内容都相互独立，可以根据需要直接使用相应的功能。
本书使用如下排版约定。
提示
这个图标用来强调一个提示、建议或一般说明。
警告
这个图标用来表示一个警告或注意事项。
本书的目标是帮助你完成工作。一般而言，你可以在自己的程序和文档中使用本书中的代码，如果你要复制的不是核心代码，则无须取得我们的许可。例如，你可以在程序中使用本书中的多个代码块，无须获取我们许可。但是，要销售或分发来源于O’Reilly图书中的示例的光盘则需要取得我们的许可。通过引用本书中的示例代码来回答问题时，不需要事先获得我们的许可。但是，如果你的产品文档中融合了本书中的大量示例代码，则需要取得我们的许可。
在引用本书中的代码示例时，如果能列出本书的属性信息是最好不过了。属性信息通常包括书名、作者、出版社和ISBN。例如：“jQuery UI by Eric Sarrion (O’Reilly). Copyright 2012 Eric Sarrion, 978-1-449-31699-0.”
在使用书中的代码时，如果不确定是否属于合理使用，或是否超出了我们的许可，请通过permissions@oreilly.com与我们联系。
如果你想就本书发表评论或有任何疑问，敬请联系出版社。
美国：
O’Reilly Media Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
中国：
北京市西城区西直门南大街2号成铭大厦C座807室（100035）
奥莱利技术咨询（北京）有限公司
我们还为本书建立了一个网页，其中包含了勘误表、示例和其他额外的信息。你可以通过如下地址访问该网页：
http://shop.oreilly.com/product/0636920023159.do
关于本书的技术性问题或建议，请发邮件到：
bookquestions@oreilly.com
欢迎登录我们的网站（http://www.oreilly.com），查看更多我们的书籍、课程、会议和最新动态等信息。
我们的其他联系方式如下：
Facebook: http://facebook.com/oreilly
Twitter: http://twitter.com/oreillymedia
YouTube: http://www.youtube.com/oreillymedia
jQuery UI是jQuery的一个插件集，为jQuery的核心库添加了新的功能。本章我们将安装jQuery UI库，并简略地看一下它的内容。接下来的几章将会详细介绍jQuery UI的每一个插件的功能。
jQuery UI库可以从http://iqueryui.com下载。单击稳定版本（Stable）的下载链接，此链接直接指向了一个ZIP文件，它包含了jQuery UI的源代码、示例及文档。文件下载完成后，把它解压缩到一个名为jqueryui的目录中。
现在，这个jqueryui目录包含了以下内容。
为了简要了解jQuery UI，请在浏览器中打开index.html文件（如图1-1所示）。
图1-1 jQuery UI首页
在这个文件中，你可以看到jQuery UI添加的不同功能，如图1-2所示，包括：
我们将会在本书的后面章节，讨论这些功能。我们还会讨论其他的机制，比如拖放、新的视觉特效、CSS主题文件等。
图1-2 jQuery UI首页：组件列表
我们之前提到的CSS主题是什么呢？为了弄清楚这个，只需按主题选择下载一个新的jQuery UI的定制版本。为此，打开http://jqueryui.com/download，显示的页面如图 1-3所示。
图1-3 下载定制的jQuery UI主题
选择右边下拉框列表中的UI lightness主题，然后单击Download（下载）按钮获取该主题的ZIP文件。这个ZIP文件的目录和之前下载的ZIP文件的目录是一模一样的，只是css目录中的CSS文件换成了新主题的对应文件。打开jqueryui中新的index.html文件（这个文件覆盖了之前的那个），就会看到新的主题了①。主题的示例效果如图1-4所示。
每种主题都是背景颜色、字体及其他屏幕元素的独特组合。如果我们查看css目录，我们将会看到刚才下载的两个主题子目录：
图1-4 ui-lightness主题
在前面的几节中，我们知道了jQuery UI是由不同的CSS和JavaScript文件组成的。此外，有些文件是压缩过的，而有些却没有压缩。因此问题就来了：要使用jQuery UI，我们的HTML页面中应该引入哪些文件呢？
未压缩的文件位于jQuery UI安装目录（jqueryui）下的development-bundle目录。
ui目录（位于development-bundle下）包含了JavaScript文件。jquery.ui.core.js文件包含了基本功能（必须引入），而其他的文件需要时再引入。最终会有一个包含了所有JavaScript文件的custom.js（例如，jquery-ui-1.8.16.custom.js）文件，这样就无须单独引入每个文件了。minified目录（位于ui目录下）包含了压缩格式的相同文件。
themes目录（位于development-bundle目录下）包含了CSS文件。它由多个目录组成，每个目录包含一个主题（比如，base、smoothness及ui-lightness目录）。每个主题下有一个images目录和其他的CSS文件。
jquery.ui.core.css文件包含了基本功能（必需的），而其他文件需要时再引入。jquery.ui.theme.css文件定义了主题自身的样式（必需的）。
jquery.ui.base.css文件包含了development-bundle目录下除了jquery.ui.theme.css外的所有文件。jquery.ui.all.css文件包含了所有的文件（即jquery.ui.base.css和jquery.ui.theme.css）。
最终，会有一个包含所有CSS文件的custom.css（例如，jquery-ui-1.8.16.custom.css）文件，而无须单独引入每个文件了（这一点对于jquery.ui.all.css也是一样的，只是jquery.ui.all.css通过CSS指令@import引入其他文件，而custom.css把所有文件的内容都包括在内了）。
我们想显示一个包含两个选项卡的简单页面。主要的JavaScript文件是jquery.ui.tabs.js，主要的CSS文件是jquery.ui.tabs.css。主页面会引入以下基础文件：①
<script src = "jquery.js"></script>
<script src = "jqueryui/development-bundle/ui/jquery.ui.core.js"></script>
<script src = "jqueryui/development-bundle/ui/jquery.ui.widget.js"></script>
<script src = "jqueryui/development-bundle/ui/jquery.ui.tabs.js"></script>
<link rel=stylesheet type=text/css
href=jqueryui/development-bundle/themes/smoothness/jquery.ui.core.css />
<link rel=stylesheet type=text/css
href=jqueryui/development-bundle/themes/smoothness/jquery.ui.theme.css/>
<link rel=stylesheet type=text/css
href=jqueryui/development-bundle/themes/smoothness/jquery.ui.tabs.css />这里的jquery.js文件和jqueryui目录位于同一层目录级别。它是标准的jQuery JavaScript文件。
core.js文件是必须引入的，tab.js文件还需要引入依赖的widget.js（正如tab.js文件中指出的）。②
core.css文件是必须引入的，theme.css文件也是必须引入的。tab.css文件则包含了选项卡的详细样式定义。
既然已经搭建了页面的基本模块，我们再创建并标记两个选项卡，并在每个选项卡里面添加一些文字。下面的代码紧接着之前引入基础文件的那部分代码。
<div id=tabs>
<ul>
<li><a href=#tab1>Tab 1</a></li>
<li><a href=#tab2>Tab 2</a></li>
</ul>
<div id=tab1>Contents of first tab</div>
<div id=tab2>Contents of the second tab</div>
</div>
<script>
$("#tabs").tabs ();
</script>这段脚本的结果（一个包括两个选项卡的页面）如图1-5所示。
图1-5 我们的第一个使用jQuery UI的程序
使用压缩文件能减少HTML页面的加载时间。
js目录（位于jQuery UI安装目录下面，这里是jqueryui）包含了JavaScript文件。这里只需要jquery-ui-1.8.16.custom.min.js文件。目录中的另外一个文件是压缩版本的jQuery。
css目录（位于jQuery UI安装目录下面，这里是jqueryui）包含了每个已安装主题的子目录（例如，smoothness和ui-lightness目录）。
每个主题都包括了一个images目录和一个会被引入到HTML页面中的CSS文件。这和最终的custom.css（比如，jquery.ui-1.8.16.custom.css）是一样的，是个压缩版本。
我们想显示一个有两个选项卡的页面（和之前的一样）：
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />除了jquery.js文件外，现在只需要两个文件了：
现在再添加与之前一样的HTML代码来创建、标记和填充选项卡：
<div id=tabs>
<ul>
<li><a href=#tab1>Tab 1</a></li>
<li><a href=#tab2>Tab 2</a></li>
</ul>
<div id=tab1>Contents of first tab</div>
<div id=tab2>Contents of the second tab</div>
</div>
<script>
$("#tabs").tabs ();
</script>结果和之前的是一样的。
CSS主题最好的地方是允许你方便地更换页面的外观——仅需更换你想要使用的主题目录名字就可以了。比如，把smoothness换成ui-lightness。
在使用未压缩版本文件的页面中，只需把页面中每个smoothness目录改成ui-lightness即可（粗体部分所示）：
<link rel=stylesheet type=text/css
href=jqueryui/development-bundle/themes/**ui-lightness**/jquery.ui.core.css />
<link rel=stylesheet type=text/css
href=jqueryui/development-bundle/themes/**ui-lightness**/jquery.ui.theme.css />
<link rel=stylesheet type=text/css
href=jqueryui/development-bundle/themes/**ui-lightness**/jquery.ui.tabs.css />在使用压缩文件的页面中，把smoothness目录改成ui-lightness（粗体部分所示）：
<link rel=stylesheet type=text/css
href=jqueryui/css/**ui-lightness**/jquery-ui-1.8.16.custom.css />HTML页面将使用新主题（如图1-6所示）。
图1-6 使用ui-lightness主题的HTML页面
在快速浏览了jQuery UI能为我们的HTML页面做什么之后，接下来我们将深入了解每个组件的细节，首先是选项卡。
① 新下载的主题也是解压缩到jqueryui目录。——译者注
② 每个jQuery UI插件的js文件，在最开始的注释区域都会注明它所依赖的js文件。——译者注
在目前的网站中，使用选项卡（tab）的HTML页面已经是很常见了。你可以使用选项卡按话题来组织一个站点的信息，这样用户选择相关的选项卡就可以快速方便地找到相关信息了。
假设我们想要编写一段HTML代码来显示图2-1所示的选项卡。它有一个选项卡栏（包含3个选项卡）并且每个选项卡里面的内容是不同的。
图2-1 HTML页面中的选项卡
要用jQuery UI创建这种类型的页面，需要以下内容：
<div>块；<ul>元素；<li>元素；<div>元素。下面是创建如图2-1所示页面的代码：
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id=tabs>
<ul>
<li><a href=#tab1>Tab 1</a></li>
<li><a href=#tab2>Tab 2</a></li>
<li><a href=#tab3>Tab 3</a></li>
</ul>
<div id=tab1>Contents of first tab</div>
<div id=tab2>Contents of the second tab</div>
<div id=tab3>Contents of the third tab</div>
</div>
<script>
</script>如果在浏览器中打开此页面（如图2-2所示），你会看到结果和预期的很不一样。为了得到想要的结果，还必须使用jQuery UI的tabs()方法。
图2-2 选项卡在HTML页面中没有按预期的那样显示
在页面的<script>标签里面添加下面这行代码（粗体部分所示），调用jQuery UI的tabs方法，使用选项卡来管理HTML元素：
<script>
$("#tabs").tabs();
</script>这样页面就会出现选项卡了。
tabs ()方法是jQuery UI的多个方法中的一个，可以在由jQuery ()函数返回的jQuery类对象上调用该方法，然后由选择器选取的结果集中的元素就被转换成选项卡了。当用户单击某个选项卡时，会自动切换到该选项卡，这一切都是jQuery UI“透明地”在管理的。
使用tabs ()方法会彻底改变页面中HTML元素的外观。实际上，该方法遍历了（jQuery UI内部实现）HTML代码，并给相关的元素（这里是选项卡）添加了新的CSS类，赋予了它们适当的样式。
图2-3展示了jQuery UI生成的HTML，tabs ()方法改变了HTML DOM（文档对象模型）树（代码是用Firefox的Firebug扩展查看的）。
图2-3 tab()方法产生的HTML代码
可以修改元素的CSS类来自定义元素的显示样式。比如，如果修改了与<li>元素关联的ui-state-default CSS类，将会得到新的选项卡外观。同样地，如果修改了与<div>元素关联的ui-tabs-panel CSS类，则选项卡的内容外观就改变了。
在HTML中添加一个<style>标签，来修改这些元素的样式（粗体部分所示）：
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<style type=text/css>
li.ui-state-default {
font-size : 10px;
}
div.ui-tabs-panel{
font-size : 15px;
font-family : georgia;
font-style : italic;
}
</style>
<div id=tabs>
<ul>
<li><a href=#tab1>Tab 1</a></li>
<li><a href=#tab2>Tab 2</a></li>
<li><a href=#tab3>Tab 3</a></li>
</ul>
<div id=tab1>Contents of first tab</div>
<div id=tab2>Contents of the second tab</div>
<div id=tab3>Contents of the third tab</div>
</div>
<script>
$("#tabs").tabs();
</script>必须在jQuery UI样式的后面添加自己的样式，否则更改是会被“忽略”的。①
如图2-4所示，应用新的样式后，选项卡及其内容的外观改变了。
图2-4 自定义样式的选项卡
tabs ()方法tabs()方法可以按以下两种形式使用：
$(selector, context).tabs (options)$(selector, context).tabs ("action", params)tabs (options)方法tabs(options)方法声明把一个HTML元素（及其内容）当作选项卡来管理。options参数是一个对象，用来指定选项卡的外观及行为。options参数有不同类型的值，它们要么是直接用于管理选项卡，要么就是管理和选项卡有关的事件。
表2-1描述了修改选项卡的外观和行为的选项。
表2-1 管理选项卡的外观和行为的选项
| 选项 |
功能 |
|---|---|
|
|
当设置为 |
|
|
使用一个数组来指定禁用的选项卡的索引（因此不能选中）。比如，用[0,1]来禁用前两个选项卡 |
|
|
指定首次选中的选项卡索引。默认为0，表示页面中的第一个选项卡 |
|
|
让用户选中新选项卡的事件的名称（默认是" |
|
|
指定伴随选择选项卡时的特效，比如渐进地显示选项卡及其内容（指定 |
|
|
指定Ajax的选项（通过Ajax来更新选项卡的内容）。比如， |
有些选项可用于管理选项卡，如选择、添加和删除选项卡。这些选项（表2-2列出的）接收event参数，随后的参数是发生事件的tab对象。这个tab对象由以下属性组成：
index，发生事件的选项卡的索引（0表示第一个选项卡）：panel，对应选项卡内容的<div>元素。表2-2 管理选项卡的选项
| 选项 |
功能 |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
tabs ("action", params)方法和前面的tabs (options)方法不同，这个新形式的方法能在创建选项卡后修改选项卡的行为。
tabs ("action", params)方法允许通过JavaScript程序操作选项卡，比如选择、禁用、添加或者删除选项卡。第一个参数是一个字符串，指定是什么操作（例如，"add"表示添加选项卡），随后的是和这个操作有关的参数（例如，选项卡的索引）。
调用这些方法有时会引起一个和操作同名的事件发生（add事件由"add"这个操作触发）。这些在options中处理的事件已经讨论过了，表2-3列出了可以执行的 操作。
表2-3 tabs ("action",params)方法的操作
| 方法 |
功能 |
|---|---|
|
|
在 |
|
|
移除指定的选项卡及其内容 |
|
|
禁用指定的选项卡 |
|
|
激活指定的选项卡 |
|
|
选中指定的选项卡，该选项卡的内容变得可见 |
|
|
将选项卡的内容和由 |
|
|
根据 |
|
|
按指定的时间周期 |
|
|
移除选项卡管理。选项卡再次成了没有CSS类和事件管理的简单HTML |
|
|
返回由选择器选取的结果集中的第一个元素中的选项卡个数 |
bind ()方法除了在tabs (options)方法的选项中使用事件方法外，jQuery UI还支持使用bind ()方法来管理这些事件。jQuery UI为选项卡创建了不同的事件，在表2-4列出。
表2-4 管理选项卡的jQuery UI事件
| 事件 |
功能 |
|---|---|
|
|
选中了选项卡（手动选中或者使用 |
|
|
选项卡内容变得可见了（手动选中、首次显示选中的选项卡时或者调用 |
|
|
添加了选项卡（调用 |
|
|
移除了选项卡（调用 |
|
|
激活了选项卡（调用 |
|
|
禁用了选项卡（调用 |
|
|
选项卡的内容已通过Ajax加载完成了（调用 |
有了这些事件，就可以利用bind (eventName, callback)提供的回调方法，完成一些处理工作。
在本节中，我们将运用所学到的有关选项卡的知识。
我们想用JavaScript动态创建选项卡（及其内容）。在下面显示的代码中，首先用HTML代码创建了3个选项卡，然后用JavaScript添加了第4个：
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id=tabs>
<ul>
<li><a href=#tab1>Tab 1</a></li>
<li><a href=#tab2>Tab 2</a></li>
<li><a href=#tab3>Tab 3</a></li>
</ul>
<div id=tab1>Contents of first tab</div>
<div id=tab2>Contents of the second tab</div>
<div id=tab3>Contents of the thir d tab</div>
</div>
<script>
$("#tabs").tabs ({
fx : { opacity : "toggle" },
}).tabs ("add", "#tab4", "Tab 4");
$("<i>Contents of the fourth tab</i>").appendTo("#tab4");
</script>请注意我们是如何将第一个tabs ()方法和第二个tabs ()方法链接起来的。第一个tabs ()方法是必需的，因为是它把编写的HTML代码转变成了显示选项卡的代码（使用jQuery UI自动添加的CSS类），第二个tabs ()方法执行了"add"操作，这将在列表的末尾添加选项卡。
jQuery UI创建了选项卡，也创建了与之内容相应的<div>。由于这内容是空的，所以添加了最后的appendTo ()语句来添加内容。
结果如图2-5所示。
图2-5 第4个选项卡是动态创建的
我们现在想使用服务器返回的HTML来初始化选项卡的内容。我们将使用PHP服务器。
我们将使用"url"和"load"操作来修改第一个选项卡（索引为0）的内容。增加的代码如粗体所示：
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id=tabs>
<ul>
<li><a href=#tab1>Tab 1</a></li>
<li><a href=#tab2>Tab 2</a></li>
<li><a href=#tab3>Tab 3</a></li>
</ul>
<div id=tab1>Contents of first tab</div>
<div id=tab2>Contents of the second tab</div>
<div id=tab3>Contents of the third tab</div>
</div>
<script>
$("#tabs").tabs ({
fx : { opacity : "toggle" },
}).tabs ("url", 0, "action.php").tabs ("load", 0);
</script>首先指定URL，然后指定将以Ajax来加载内容（要按此顺序执行）。action.php文件如下：
<?
$txt = "<p> Tab content sent by the server </p>";
$txt = utf8_encode($txt);
echo ($txt);
?>结果如图2-6所示。
图2-6 用Ajax动态创建的选项卡内容
请注意，因为在HTML页面里使用了Ajax请求，这个HTML页面应该使用HTTP协议（即地址栏中的URL要以http开头）来显示，而不是简单地把HTML文件拖放到浏览器中就行了。
接下来看一下如何把信息通过Ajax传输给服务器。
这个例子展示了如何通过Ajax把信息传输给服务器，来修改相应选项卡的内容。在这个例子中，把一个人的名字和姓氏发送给服务器，然后把服务器返回的内容显示在选项卡的内容中。传输的信息（名字和姓氏）是写在ajaxOptions选项中的data属性里的（如粗体部分所示）：
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id=tabs>
<ul>
<li><a href=#tab1>Tab 1</a></li>
<li><a href=#tab2>Tab 2</a></li>
<li><a href=#tab3>Tab 3</a></li>
</ul>
<div id=tab1>Contents of first tab</div>
<div id=tab2>Contents of the second tab</div>
<div id=tab3>Contents of the third tab</div>
</div>
<script>
$("#tabs").tabs ({
fx : { opacity : "toggle" },
ajaxOptions : { data : { name : "Sarrion", surname : "Eric" } }
}).tabs ("url", 0, "action.php").tabs ("load", 0);
</script>接收发送参数和显示选项卡内容的action.php文件如下:
<?
$name = $_REQUEST["name"];
$surname = $_REQUEST["surname"];
$name = utf8_decode ($name);
$surname = utf8_decode ($surname);
$txt = "<p> Tab content sent by the server </p>";
$txt .= "Name : " . $name . "<br />";
$txt .= "Surname : " . $surname . "<br />";
$txt = utf8_encode ($txt);
echo ($txt);
?>结果如图2-7所示。
图2-7 使用Ajax发送的选项卡内容
add方法我们想动态创建新的选项卡，并由Ajax动态初始化该选项卡的内容。add事件（插入新选项卡时会触发）可以完成这件事，比如发起插入内容的Ajax请求（如粗体部分所示）：
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id=tabs>
<ul>
<li><a href=#tab1>Tab 1</a></li>
<li><a href=#tab2>Tab 2</a></li>
<li><a href=#tab3>Tab 3</a></li>
</ul>
<div id=tab1>Contents of first tab</div>
<div id=tab2>Contents of the second tab</div>
<div id=tab3>Contents of the third tab</div>
</div>
<script>
$("#tabs").tabs ({
fx : { opacity : "toggle" },
add : function (event, tab)
{
$(tab.panel).load ("action.php");
}
}).tabs ("add", "#tab4", "Tab 4");
</script>"add"操作触发了add事件，该事件会更新新建的选项卡的内容：
<?
$txt = "<p> Tab content sent by the server </p>";
$txt = utf8_encode ($txt);
echo($txt);
?>结果如图2-8所示。
图2-8 使用add事件
tabsadd事件使用同样的例子，只是这次用bind()方法来管理事件。在添加选项卡时，jQuery UI会触发tabsadd事件（如粗体部分所示）：
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id=tabs>
<ul>
<li><a href=#tab1>Tab 1</a></li>
<li><a href=#tab2>Tab 2</a></li>
<li><a href=#tab3>Tab 3</a></li>
</ul>
<div id=tab1>Contents of first tab</div>
<div id=tab2>Contents of the second tab</div>
<div id=tab3>Contents of the third tab</div>
</div>
<script>
$("#tabs").tabs ({
fx : { opacity : "toggle" }
}).bind ("tabsadd", function (event, tab)
{
$ (tab.panel).load ("action.php");
}).tabs ("add", "#tab4", "Tab 4");
</script>首先创建选项卡，然后监听tabsadd事件，最后向列表中插入一个选项卡。要小心，这个顺序是很重要的，否则没有任何效果。
① 如果自己添加的样式写在jQuery UI的前面，则根据CSS的优先级规则，自己添加的样式会被jQuery UI的样式覆盖，就像被“忽略”了一样。——译者注
