7.5 jQuery UI插件

7.5.1 jQuery UI简介

jQuery UI（http://ui.jquery.com ）源自于一个jQuery插件—Interface。Interface插件是由Stefan Petre创建的，Paul Bakaus也为该插件的开发做出了重大贡献。Interface插件最早版本为1.2，只支持jQuery 1.1.2的版本，后来在PaulBakaus等人领导下，将Interface的大部分代码基于jQuery 1.2的API进行重构，并统一了API。由于改进重大，因此版本号不是1.3而是直接跳到了1.5，并且改名为jQuery UI，同时也确立了jQuery UI官方插件的地位，并逐步走向完善。由于jQuery本身内核的逐渐完善，因此jQuery UI很有可能是jQuery今后发展的重点，也预示着jQuery未来的走向。

jQuery UI主要分为3个部分，交互、微件和效果库：

• 交互。这里都是一些与鼠标交互相关的内容。包括拖动（Draggable）、置放（Droppable）、缩放（Resizable）、选择（Selectable）和排序（Sortable）等。微件（Widget）中有部分是基于这些交互组件来制作的。此库需要一个jQuery UI核心库—ui.core.js支持。
• 微件。这里主要是一些界面的扩展。里边包括了手风琴导航（Accordion）、自动完成（Autocomplete）、取色器（Colorpicker）、对话框（Dialog）、滑块（Slider）、标签（Tabs）、日历（Datepicker）、放大镜（Magnifier）、进度条（Progressbar）和微调控制器（Spinner）等。在将来jQuery 1.7中还会有历史(History)、布局（Layout）、栅格（Grid）和菜单（Menu）等。此外，工具栏（Toolbar）和上传组件（Uploader）也正在讨论中。此库需要一个jQuery UI核心库ui.core.js的支持。
• 效果库。此库用于提供丰富的动画效果，让动画不再局限于 animate()方法。效果库有自己的一套核心即effects.core.js，无需jQuery UI的核心库ui.core.js支持。

7.5.2 下载地址

jQuery UI插件的下载地址为：

http://ui.jquery.com/download

。在图7-17所示界面中，读者可以下载该插件。单击右上角区域的“build customdownload”链接，可以直接下载完整套件，包括源码、发行版和测试驱动等。

[插图]

图7-17 jQuery UI插件官网截图

或者直接访问网址：
http://jqueryui.com/download

如图7-18所示页面，可以挑选需要的组件，在右侧选择jQuery UI的版本等，然后单击左侧的“Download”按钮便可下载。

[插图]

图7-18 自助下载

7.5.3 快速上手

jQuery UI插件的大部分API已经统一了。以Draggables为例，有4个基本的API。

• draggable（options）：这是用来让一个DOM对象变成可拖动的对象的方法。其中的options可以设置各种不同的参数。
• draggable（”disable”）：让对应的DOM对象暂时禁用拖动。
• draggable（”enable”）：让对应的DOM对象重新启用拖动。
• draggable（”destroy”）：彻底移除拖动功能。

以上这些就是jQuery UI中大部分插件通用的用法。jQuery UI插件系列众多，鉴于文章篇幅有限，这里只挑选出其中一个实用的拖动排序组件Sortable来进行简单介绍和讲解，其他组件读者可以自行参考jQuery UI的官方网站。

图7-19是某个网站右侧的一些条目，这些条目允许用户更改它们的顺序，即个性化。利用jQuery UI中的Sortable插件，可以容易地实现这本来很复杂的一系列操作。

[插图]

图7-19 某网站右侧条目

首先构建一个简单的HTML结构并且引入Sortable库，以及其依赖的ui.core.js，完整程序代码如下：

[插图]

运行上面的代码，列表元素就可以拖动排序了，如图7-20所示。

上面的代码中，引入的脚本都是sortable插件所必需的，没有引用多余的脚本，如果你对 ui 插件的依赖关系不是太了解，并对脚本的大小不是太关注的话，那么可以使用jQuery UI提供的custom包，它包含了jQuery UI的所有扩展，是一个通用包。

[插图]

图7-20 拖动排序

[插图]

7.5.4 与单击事件冲突

在某些特殊情况下会因为拖动事件抢在单击事件之前而导致单击事件失效。如果出现这种情况，可以设置参数delay延时1毫秒，即改为：

[插图]

jQuery调用代码为：

[插图]

7.5.5 与后台结合

如果要把Sortable插件与后台结合，需要完成两件事情，首先是查找触发排序后的回调函数，然后取得排列的顺序并通过Ajax发送给后台。

首先解决回调函数。通过查找API，知道最符合要求的回调函数是stop，因此把前面的jQuery代码修改为：

[插图]

当拖动列表完成后，将会出现图7-21的提示效果。

[插图]

图7-21 拖动完成后触发

接下来就需要得到列表元素拖动后的顺序，可以通过sortable(‘serialize’)方法直接获取元素排列的顺序。但是排列要求 id 符合特定的命名规范，虽然可以自定义规则，但为了简化起见，这里还是将id修改为“name_value”的形式。例如，这里的<li>都改成如下代码：

[插图]

然后，使用$(‘#myList’).sortable(‘serialize’)方法就能得到以下形式的数据：

[插图]

最后，可以利用Ajax方法把这组数据传递到后台，后台得到一个名为myList的数组。这里使用POST方式把数据提交给后台，代码如下：

[插图]

正确发送请求后，sortable.php 就可以获取相应的顺序，并且写入数据库，以便保存用户的个性化数据。在这里并不讨论后台如何保存，因为这已经超出了本书介绍的范围。因此在这里的后台程序中只是简单处理一下获取的数组，并且按顺序将它们返回给前台，以表示后台已成功接受到数据并返回。代码如下：

[插图]

运行代码后，效果如图7-22所示。

[插图]

图7-22 排序后的值