作者：[美]Eric Sarrion 著
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
jQuery UI开发指南试读：
前言
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第1章jQuery UI介绍
jQuery UI是jQuery的一个插件集，为jQuery的核心库添加了新的功能。本章我们将安装jQuery UI库，并简略地看一下它的内容。接下来的几章将会详细介绍jQuery UI的每一个插件的功能。1.1 jQuery UI的安装
jQuery UI库可以从http://iqueryui.com下载。单击稳定版本（Stable）的下载链接，此链接直接指向了一个ZIP文件，它包含了jQuery UI的源代码、示例及文档。文件下载完成后，把它解压缩到一个名为jqueryui的目录中。
现在，这个jqueryui目录包含了以下内容。● 一个css子目录，包含与jQuery UI相关的CSS文件。之后你会知
道jQuery UI是使用CSS主题来管理界面元素的自定义样式的。例
如，不同主题下的滑块可能显示得不一样，其他组件（如日历和
选项卡）也可能显示得不一样。● 一个js子目录，包含jQuery UI的JavaScript文件。这个目录包含
一个拥有jQuery UI全部功能的压缩文件和一个jQuery库文件。● 一个development-bundle子目录，包含多个不同的子目录——
demos（jQuery UI的示例文件）、docs（jQuery UI的文档文
件）、themes（所有与jQuery UI相关联的CSS主题文件）以及
ui（jQuery UI的JavaScript文件）。● 一个index.html文件，可以在浏览器中打开这个文件，并查看一
些jQuery UI的功能。1.2 jQuery UI概览
为了简要了解jQuery UI，请在浏览器中打开index.html文件（如图1-1所示）。图1-1 jQuery UI首页
在这个文件中，你可以看到jQuery UI添加的不同功能，如图1-2所示，包括：● 折叠菜单（accordion menu）；● 输入框的自动补全机制（autocompletion mechanism）；● 漂亮的按钮（button）和复选框（checkbox）；● 便于页面展示的选项卡机制（tab mechanism）；● 显示在页面最上层的对话框（dialog box）；● 自定义图标（custom icon）；● 滑块（slider）；● 日历（calendar）；● 进度条（progress bar）。
我们将会在本书的后面章节，讨论这些功能。我们还会讨论其他的机制，比如拖放、新的视觉特效、CSS主题文件等。图1-2 jQuery UI首页：组件列表1.3 什么是CSS主题
我们之前提到的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目录，我们将会看到刚才下载的两个主题子目录：● smoothness是下载jQuery UI时的默认主题；● ui-lightness是我们刚从http://jqueryui.com/download页面上下载的
主题。图1-4 ui-lightness主题1.4 在HTML页面中应该引入哪些文件
在前面的几节中，我们知道了jQuery UI是由不同的CSS和JavaScript文件组成的。此外，有些文件是压缩过的，而有些却没有压缩。因此问题就来了：要使用jQuery UI，我们的HTML页面中应该引入哪些文件呢？1.4.1 未压缩文件
未压缩的文件位于jQuery UI安装目录（jqueryui）下的development-bundle目录。1．JavaScript文件
ui目录（位于development-bundle下）包含了JavaScript文件。jquery.ui.core.js文件包含了基本功能（必须引入），而其他的文件需要时再引入。最终会有一个包含了所有JavaScript文件的custom.js（例如，jquery-ui-1.8.16.custom.js）文件，这样就无须单独引入每个文件了。minified目录（位于ui目录下）包含了压缩格式的相同文件。2．CSS文件
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把所有文件的内容都包括在内了）。3．引入未压缩文件的HTML页面示例
我们想显示一个包含两个选项卡的简单页面。主要的JavaScript文件是jquery.ui.tabs.js，主要的CSS文件是jquery.ui.tabs.css。主页面①会引入以下基础文件：
这里的jquery.js文件和jqueryui目录位于同一层目录级别。它是标准的jQuery JavaScript文件。
core.js文件是必须引入的，tab.js文件还需要引入依赖的②widget.js（正如tab.js文件中指出的）。
core.css文件是必须引入的，theme.css文件也是必须引入的。tab.css文件则包含了选项卡的详细样式定义。
既然已经搭建了页面的基本模块，我们再创建并标记两个选项卡，并在每个选项卡里面添加一些文字。下面的代码紧接着之前引入基础文件的那部分代码。
这段脚本的结果（一个包括两个选项卡的页面）如图1-5所示。图1-5 我们的第一个使用jQuery UI的程序1.4.2 压缩文件
使用压缩文件能减少HTML页面的加载时间。1．JavaScript文件
js目录（位于jQuery UI安装目录下面，这里是jqueryui）包含了JavaScript文件。这里只需要jquery-ui-1.8.16.custom.min.js文件。目录中的另外一个文件是压缩版本的jQuery。2．CSS文件
css目录（位于jQuery UI安装目录下面，这里是jqueryui）包含了每个已安装主题的子目录（例如，smoothness和ui-lightness目录）。
每个主题都包括了一个images目录和一个会被引入到HTML页面中的CSS文件。这和最终的custom.css（比如，jquery.ui-1.8.16.custom.css）是一样的，是个压缩版本。3．引入压缩文件的HTML示例页面
我们想显示一个有两个选项卡的页面（和之前的一样）：
除了jquery.js文件外，现在只需要两个文件了：● jQuery UI 的JavaScript全局文件（jquery-
ui-1.8.16.custom.min.js）；● 与使用的样式相关的整个jQuery UI CSS文件（smoothness/
jquery-ui-1.8.16.custom.css，与smoothness主题相关的文件）。
现在再添加与之前一样的HTML代码来创建、标记和填充选项卡：
结果和之前的是一样的。1.5 更换CSS主题
CSS主题最好的地方是允许你方便地更换页面的外观——仅需更换你想要使用的主题目录名字就可以了。比如，把smoothness换成ui-lightness。
在使用未压缩版本文件的页面中，只需把页面中每个smoothness目录改成ui-lightness即可（粗体部分所示）：
在使用压缩文件的页面中，把smoothness目录改成ui-lightness（粗体部分所示）：
HTML页面将使用新主题（如图1-6所示）。图1-6 使用ui-lightness主题的HTML页面1.6 准备开始
在快速浏览了jQuery UI能为我们的HTML页面做什么之后，接下来我们将深入了解每个组件的细节，首先是选项卡。① 新下载的主题也是解压缩到jqueryui目录。——译者注② 每个jQuery UI插件的js文件，在最开始的注释区域都会注明它所依赖的js文件。——译者注第2章选项卡
在目前的网站中，使用选项卡（tab）的HTML页面已经是很常见了。你可以使用选项卡按话题来组织一个站点的信息，这样用户选择相关的选项卡就可以快速方便地找到相关信息了。2.1 选项卡的基本用法
假设我们想要编写一段HTML代码来显示图2-1所示的选项卡。它有一个选项卡栏（包含3个选项卡）并且每个选项卡里面的内容是不同的。图2-1 HTML页面中的选项卡
要用jQuery UI创建这种类型的页面，需要以下内容：● 一个包含整个选项卡的
- 元素；● 每个选项卡对应的一个
- 元素；● 每个选项卡的窗口对应的一个元素。
下面是创建如图2-1所示页面的代码：
如果在浏览器中打开此页面（如图2-2所示），你会看到结果和预期的很不一样。为了得到想要的结果，还必须使用jQuery UI的tabs()方法。图2-2 选项卡在HTML页面中没有按预期的那样显示
在页面的
这样页面就会出现选项卡了。
tabs ()方法是jQuery UI的多个方法中的一个，可以在由jQuery ()函数返回的jQuery类对象上调用该方法，然后由选择器选取的结果集中的元素就被转换成选项卡了。当用户单击某个选项卡时，会自动切换到该选项卡，这一切都是jQuery UI“透明地”在管理的。2.2 格式化内容
使用tabs ()方法会彻底改变页面中HTML元素的外观。实际上，该方法遍历了（jQuery UI内部实现）HTML代码，并给相关的元素（这里是选项卡）添加了新的CSS类，赋予了它们适当的样式。
图2-3展示了jQuery UI生成的HTML，tabs ()方法改变了HTML DOM（文档对象模型）树（代码是用Firefox的Firebug扩展查看的）。图2-3 tab()方法产生的HTML代码
可以修改元素的CSS类来自定义元素的显示样式。比如，如果修改了与
在HTML中添加一个
必须在jQuery UI样式的后面添加自己的样式，否则更改是会被①“忽略”的。
如图2-4所示，应用新的样式后，选项卡及其内容的外观改变了。图2-4 自定义样式的选项卡2.3 tabs ()方法
tabs()方法可以按以下两种形式使用：● $(selector, context).tabs (options)● $(selector, context).tabs ("action", params)2.3.1 tabs (options)方法
tabs(options)方法声明把一个HTML元素（及其内容）当作选项卡来管理。options参数是一个对象，用来指定选项卡的外观及行为。options参数有不同类型的值，它们要么是直接用于管理选项卡，要么就是管理和选项卡有关的事件。1．选项卡的外观和行为
表2-1描述了修改选项卡的外观和行为的选项。表2-1 管理选项卡的外观和行为的选项 选项功能options.当设置为true时，允许取消选中选项卡。当设置为false（默认值）时，单collapsible击选中的选项卡不会取消选中（它仍然被选中）options.disabled使用一个数组来指定禁用的选项卡的索引（因此不能选中）。比如，用[0,1]来禁用前两个选项卡options.selected指定首次选中的选项卡索引。默认为0，表示页面中的第一个选项卡options.event让用户选中新选项卡的事件的名称（默认是"click"）。例如，如果此选项设置为"mouseover"，则当鼠标光标移至选项卡时，就会选中该选项卡options.fx指定伴随选择选项卡时的特效，比如渐进地显示选项卡及其内容（指定options.fx = {{opacity: "toggle"}}）options.指定Ajax的选项（通过Ajax来更新选项卡的内容）。比如，ajaxOptionsoptions.ajaxOptions.data可以指定发送给服务器的参数2．管理与选项卡相关的事件
有些选项可用于管理选项卡，如选择、添加和删除选项卡。这些选项（表2-2列出的）接收event参数，随后的参数是发生事件的tab对象。这个tab对象由以下属性组成：● index，发生事件的选项卡的索引（0表示第一个选项卡）：● panel，对应选项卡内容的
和前面的tabs (options)方法不同，这个新形式的方法能在创建选项卡后修改选项卡的行为。
tabs ("action", params)方法允许通过JavaScript程序操作选项卡，比如选择、禁用、添加或者删除选项卡。第一个参数是一个字符串，指定是什么操作（例如，"add"表示添加选项卡），随后的是和这个操作有关的参数（例如，选项卡的索引）。
调用这些方法有时会引起一个和操作同名的事件发生（add事件由"add"这个操作触发）。这些在options中处理的事件已经讨论过了，表2-3列出了可以执行的 操作。表2-3 tabs ("action",params)方法的操作方法功能tabs ("add", "#id", 在index指定的位置（从0开始）添加选项卡。该添加的选项卡后面的选title, index)项卡的索引号增1。"#id" 是和这个选项卡内容相关的
除了在tabs (options)方法的选项中使用事件方法外，jQuery UI还支持使用bind ()方法来管理这些事件。jQuery UI为选项卡创建了不同的事件，在表2-4列出。表2-4 管理选项卡的jQuery UI事件事件功能tabsselect选中了选项卡（手动选中或者使用tabs ("select")方法）tabsshow选项卡内容变得可见了（手动选中、首次显示选中的选项卡时或者调用 tabs ("select")方法）tabsadd添加了选项卡（调用tabs ("add")方法）tabsremove移除了选项卡（调用tabs ("remove")方法）tabsenable激活了选项卡（调用tabs ("enable")方法）tabsdisable禁用了选项卡（调用tabs ("disable")方法）tabsload选项卡的内容已通过Ajax加载完成了（调用tabs ("load")方法）
有了这些事件，就可以利用bind (eventName, callback)提供的回调方法，完成一些处理工作。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 第4个选项卡是动态创建的2.5.2 使用Ajax修改选项卡的内容
我们现在想使用服务器返回的HTML来初始化选项卡的内容。我们将使用PHP服务器。
我们将使用"url"和"load"操作来修改第一个选项卡（索引为0）的内容。增加的代码如粗体所示：
首先指定URL，然后指定将以Ajax来加载内容（要按此顺序执行）。action.php文件如下： Tab content sent by the server
"; $txt = utf8_encode($txt); echo ($txt);?>结果如图2-6所示。图2-6 用Ajax动态创建的选项卡内容
请注意，因为在HTML页面里使用了Ajax请求，这个HTML页面应该使用HTTP协议（即地址栏中的URL要以http开头）来显示，而不是简单地把HTML文件拖放到浏览器中就行了。
接下来看一下如何把信息通过Ajax传输给服务器。2.5.3 通过Ajax把信息传输给服务器
这个例子展示了如何通过Ajax把信息传输给服务器，来修改相应选项卡的内容。在这个例子中，把一个人的名字和姓氏发送给服务器，然后把服务器返回的内容显示在选项卡的内容中。传输的信息（名字和姓氏）是写在ajaxOptions选项中的data属性里的（如粗体部分所示）：
接收发送参数和显示选项卡内容的action.php文件如下: Tab content sent by the server
"; $txt .= "Name : " . $name . ""; $txt .= "Surname : " . $surname . "
"; $txt = utf8_encode ($txt); echo ($txt);?>
结果如图2-7所示。图2-7 使用Ajax发送的选项卡内容2.5.4 使用选项卡的add方法
我们想动态创建新的选项卡，并由Ajax动态初始化该选项卡的内容。add事件（插入新选项卡时会触发）可以完成这件事，比如发起插入内容的Ajax请求（如粗体部分所示）：
"add"操作触发了add事件，该事件会更新新建的选项卡的内容： Tab content sent by the server
"; $txt = utf8_encode ($txt); echo($txt);?>结果如图2-8所示。图2-8 使用add事件2.5.5 使用tabsadd事件
使用同样的例子，只是这次用bind()方法来管理事件。在添加选项卡时，jQuery UI会触发tabsadd事件（如粗体部分所示）：
首先创建选项卡，然后监听tabsadd事件，最后向列表中插入一个选项卡。要小心，这个顺序是很重要的，否则没有任何效果。① 如果自己添加的样式写在jQuery UI的前面，则根据CSS的优先级规则，自己添加的样式会被jQuery UI的样式覆盖，就像被“忽略”了一样。——译者注第3章折叠菜单
和选项卡一样，可以使用折叠菜单（accordion menu）来组织HTML页面上的信息。菜单中的内容是显示的还是隐藏的，取决于该菜单是否被选中。折叠菜单的意思是当显示一个菜单时，另外的菜单会隐藏，产生的动画看起来就像手风琴演奏一样。3.1 折叠菜单的基本用法
假设我们想要编写一段HTML代码来显示图3-1所示的折叠菜单。它有3个菜单栏，每一个里面的内容都是不一样的。图3-1 折叠菜单
按照jQuery UI的要求，需要挨个（标题和内容元素挨个重复）为每一个菜单编写以下内容：● 一个包含整个折叠菜单的
、、…、，它
，它
因为没用到）；● 一个作为菜单内容的
在浏览器中显示这个页面，它只是一张包含了菜单标题和内容的简单HTML页面，结果又不是我们预期的（如图3-2所示）。
试读结束[说明：试读内容隐藏了图片]