7.4　jQuery UI 插件库

与Cycle、Cookie等大多数插件只做一件事相比，jQuery UI能够做的事则可谓包罗万象（而且，做得也都很好）。实际上，虽然jQuery UI经常只保存在一个文件中，但它可不仅仅是一个插件，而是一个完整的插件库。

jQuery UI团队创建了大量核心交互组件及成熟的部件（widget），使用它们可以创造出更加类似桌面应用程序的Web体验。交互式组件包括用于拖动、放置、排序和调整项目大小的方法。当前稳定的部件有按钮、折叠窗格、日期选择器、对话框，等等。此外，jQuery UI还为补充和增强jQuery的核心动画功能提供了相当多的高级效果。

本章不可能面面俱到地介绍jQuer UI库——那可是得用一本书介绍的主题。好在这个库非常注重功能的一致性，因此深入介绍其中几个特性，就能起到以小见大的作用。

访问http://jqueryui.com/，可以下载所有jQuery UI模块，或者查看相应的文档及示例。其中下载页面中提供了涵盖所有特性的组合下载，也提供了可以自由组合的自定义下载。下载的ZIP文件中还包含一个样式表和一些图片，用于jQuery UI的交互组件及部件。

7.4.1　效果

jQuery UI中的效果（effect）模块由一个核心文件和一组独立的效果文件组成。其中，核心文件为创建颜色动画和基于类的动画提供了支持，同时也提供了高级的缓动函数。

  • 颜色动画

在文档中引用核心效果文件的情况下，扩展的.animate()方法可以接受另外一些样式属性，例如borderTopColor、backgroundColor和color。代码清单7-8实现的效果就是将黑色背景上的白色文本逐渐变为浅灰色背景上的黑色文本。

代码清单7-8

  1. $books.hover(function() {
  2.   $books.find('.title').animate({
  3.     backgroundColor: '#eee',
  4.     color: '#000'
  5.   }, 1000);
  6. }, function() {
  7.   $books.find('.title').animate({
  8.     backgroundColor: '#000',
  9.     color: '#fff'
  10.   }, 1000);
  11. });

现在，把鼠标移动到页面中的幻灯片区域，图书书名的文本和背景颜色就会在1秒（1000毫秒）的周期内平滑地完成动画，如图7-3所示。

7.4.1　效果 - 图1

图　7-3

  • 基于类的动画

前几章介绍过三个操作CSS类的方法：.addClass()、.removeClass()和.toggleClass()。这三个方法在jQuery UI中经过扩展，都可以接受第二个可选的参数，用于控制动画时长。在指定这个参数的情况下，页面的行为就像是调用了.animate()并直接指定了所有样式属性一样，最终结果就是得到为元素应用类之后的外观，参见代码清单7-9。

代码清单7-9

  1. $(document).ready(function() {
  2.   $('h1').click(function() {
  3.     $(this).toggleClass('highlighted', 'slow');
  4.   });
  5. });

执行了代码清单7-9中的代码之后，再单击页面的标题就会给它添加或删除hightlighted类。因为这里指定的速度是slow，所以最终的颜色、边框和外边距都会以动画形式慢慢地呈现，而不是一下子就应用这些样式，如图7-4所示。

7.4.1　效果 - 图2

图　7-4

  • 高级缓动函数

jQuery在某个时长内不会以稳定的速度来执行动画。例如，如果我们调用$('#my-div').slideUp(1000)，那么相应元素的高度变为零要经过整整1秒的时间。但在这1秒的开始和结尾，元素的高度变化比较慢，而在这1秒的中间，高度变化比较快。这种速度的变化就是缓动，缓动有助于让动画更流畅、更自然。

高级缓动函数可以改变加速或减速曲线，以产生与众不同的结果。例如，easeInExpo函数会让动画速度以指数方式加快，最终的动画速度要数倍于开始时的速度。在任何核心jQuery动画方法或jQuery UI效果方法中，都可以指定自定义的缓动函数。具体指定方式根据使用的语法不同，可能是添加一个参数，也可能是为选项对象中添加一个选项。

为了演示缓动函数的作用，下面我们就在代码清单7-9的基础上，为.toggleClass()方法传入一个easeInExpo参数作为缓动样式，参见代码清单7-10。

代码清单7-10

  1. $(document).ready(function() {
  2.   $('h1').click(function() {
  3.     $(this).toggleClass('highlighted', 'slow', 'easeInExpo');
  4.   });
  5. });

这样，再单击页面中的标题，通过切换类而修改的样式会在开始的时候慢慢地应用，然后突然加速完成整个变换。

　观看缓动函数的示例

要查看完整的缓动函数的演示效果，请访问http://api.jqueryui.com/easings/。

  • 其他效果

效果模块的独立效果文件中包含了非常多的变换，其中一些变换远比jQuery本身提供的简单滑动和淡化动画复杂得多。这些变换都可以通过调用.effect()方法实现，这个方法是jQuery UI添加的。对于那些隐藏和显示元素的动画，可以视情况调用.show()、.hide()和.toggle()方法。

jQuery UI提供的效果可以满足各种不同的需求。比如，transfer和size可以用来改变元素的形状和位置，explode和puff可以产生更吸引人的隐藏动画，而pulsate和shake则可以让元素更吸引眼球。

　观看效果的示例

要查看jQuery UI效果的完整演示，请访问http://jqueryui.com/effect/#default。

比如，shake效果特别适合强调当前不能接受的动作。这个效果可以应用到Resume按钮无效的情况下，参见代码清单7-11。

代码清单7-11

  1. $('<button>Resume</button>').click(function(event) {
  2.   event.preventDefault();
  3.   var $paused = $('ul:paused');
  4.   if ($paused.length) {
  5.     $paused.cycle('resume');
  6.   }
  7.   else {
  8.     $(this).effect('shake', {
  9.       distance: 10
  10.     });
  11.   }
  12. }).appendTo($controls);

以上代码检查了$('ul:paused')的长度，确定页面中是否存在暂停的可以恢复的幻灯片。如果有，则像以前一样执行Cycle的resume操作。否则，就执行shake效果。我们看到，shake效果（与其他效果一样）有很多选项，用于微调它的外观。在此，我们设置了效果的distance比默认值小一些，以便在有人单击时比较快地来回摇摆。

7.4.2　交互组件

接下来要介绍jQuery UI中的交互式组件。交互式组件就是一组行为，可以跟自定义代码结合起来生成复杂的交互式应用。例如，Resizable就是这样一个组件，这个组件可以让用户通过自然地拖动把元素调整成任意大小。

为元素应用交互行为非常简单，只需要在元素上调用与组件同名的方法即可。例如，通过调用.resizable()方法，就可以把图书书名区域变成可以调整大小的元素。

代码清单7-12

  1. $books.find('.title').resizable();

文档中引用了jQuery UI的CSS文件后，以上代码就会在书名所在盒状区域右下角添加一个调整大小的手柄。拖动这个手柄就可以修改这个区域的宽度和高度，如图7-5所示。

7.4.1　效果 - 图3

图　7-5

想必读者已经猜到了，这些方法都可以接受很多自定义的选项。比如，假设我们想限制只能调整垂直方向上的高度，通过指定应该添加的拖动手柄即可，参见代码清单7-13。

代码清单7-13

  1. $books.find('.title').resizable({
  2.   handles: 's'
  3. });

代码中的s表示south（也就是底部），即在区域底部添加拖动手柄。于是，这个区域就只能调节高度了，如图7-6所示。

7.4.1　效果 - 图4

图　7-6

　其他交互式组件

jQuery UI还包括其他交互式组件，比如Draggable、Droppable和Sortable。这些组件与Resizable类似，可以配置很多选项。要了解这些组件及其选项，请访问http://jqueryui.com/。

7.4.3　部件

除了交互式组件之外，jQuery UI库中还提供了一批可靠的用户界面部件。无论从外观还是功能上看，这些“开箱即用”的部件都非常类似我们熟悉的桌面应用程序中的相应元素。有些部件十分简单，例如Button部件仅仅是用来增强页面上的按钮和链接的，具有相对更漂亮一些的样式和翻转状态。

要为页面中所有的按钮添加上述外观和行为极其简单，参见代码清单7-14。

代码清单7-14

  1. $(document).ready(function() {
  2.   $('button').button();
  3. });

在引用jQuery UI Smoothness主题及样式表的情况下，这些按钮就会有平滑、有斜面的外观，如图7-7所示。

7.4.1　效果 - 图5

图　7-7

与其他UI部件和交互式组件一样，Button部件也可以接受一些选项。比如，假设我们想为页面中的两个按钮提供适当的图标，那么就可以使用Button部件随附的大量预定义的图标。为此，需要把对.button()的调用分成两次，分别为每个按钮指定相应的图标，如代码清单7-15所示。

代码清单7-15

  1. $('<button>Pause</button>').click(function(event) {
  2.   // ...
  3. }).button({
  4.   icons: {primary: 'ui-icon-pause'}
  5. }).appendTo($controls);
  6. $('<button>Resume</button>').click(function(event) {
  7.   // ...
  8. }).button({
  9.   icons: {primary: 'ui-icon-play'}
  10. }).appendTo($controls);

代码中指定的primary图标对应着jQuery UI主题框架中的标准类名。默认情况下，primary图标显示在按钮文本的左铡，而secondary图标则显示在文本右侧，如图7-8所示。

7.4.1　效果 - 图6

图　7-8

其他部件相对来说要更复杂一些。Slider部件就引入了一个全新的表单元素，它与HTML5的range元素类似，但却能兼容所有主流的浏览器。对于Slider组件，可以自定义的选项就更多了，参见代码清单7-16。

代码清单7-16

  1. $('<div id="slider"></div>').slider({
  2.   min: 0,
  3.   max: $('#books li').length - 1
  4. }).appendTo($controls);

就这么简单地调用.slider()，即可把一个<div>元素转换成一个滑动条部件。可以通过拖动或按键盘上的方向键（考虑无障碍性）来控制滑动条，如图7-9所示。

7.4.1　效果 - 图7

图　7-9

在代码清单7-16中，我们将滑动条的最小值指定为0，最大值指定为幻灯片中最后一本书的索引值。然后，就可以利用这个滑动条来手工控制幻灯片了——只要在两者的状态发生变化时，在幻灯片和滑动条之间同步发送消息即可。

为了响应滑动条的值的变化，可以绑定一个由滑动条触发的自定义事件。这个事件名为slide，虽然它不是原生JavaScript事件，但在jQuery代码中，它就像是原生事件一样。而且，监听这种事件也不用显式地调用.on()，只要把事件处理程序传递给.slider()方法即可，参见代码清单7-17。

代码清单7-17

  1. $('<div id="slider"></div>').slider({
  2.   min: 0,
  3.   max: $('#books li').length - 1,
  4.   slide: function(event, ui) {
  5.     $books.cycle(ui.value);
  6.   }
  7. }).appendTo($controls);

无论什么时候调用slide回调函数，其参数ui中都会保存着部件相关的信息，包括滑动条当前的值。把这个值传递给Cycle插件，就可以实现通过滑动条控制幻灯片了。

当然，我们还需要在幻灯变换时更新滑动条部件。要实现相反方向的通信，可以使用Cycle的before回调函数，这个函数会在每次幻灯变换时触发，参见代码清单7-18。

代码清单7-18

  1. $(document).ready(function() {
  2.   var $books = $('#books').cycle({
  3.     timeout: 2000,
  4.     speed: 200,
  5.     pause: true,
  6.     before: function() {
  7.       $('#slider')
  8.         .slider('value', $('#books li').index(this));
  9.     }
  10.   });
  11. });

在before回调函数中，我们再次调用了.slider()方法。这一次，我们给它传递的第一个参数是'value'，用以设置滑动条的新值。用jQuery UI的话来说，这个value是Slider的一个方法，尽管这个方法是通过调用.slider()方法来调用的，并没有使用它的方法名。

　其他部件

jQuery UI的Datepicker、Dialog、Tabs以及Accordion等部件都有一些可以配置的选项、事件和方法。要详细了解这些内容，请访问http://jqueryui.com/。

7.4.4　jQuery UI主题卷轴

jQuery UI库最近增添的一项名为ThemeRoller（主题卷轴）的功能，这是一个面向UI部件的基于Web的交互式主题引擎。有了ThemeRoller，就可以在瞬间创建出高度自定义、专业化的元素如前例所示，我们为刚才创建的按钮和滑动条只应用一种主题；在没有应用自定义设置的情况下，这个主题可以通过ThemeRoller输出（如图7-10所示）。

7.4.1　效果 - 图8

图　7-10

如果想生成另一套不同的样式，只要访问 http://jqueryui.com/themeroller/，根据需要改几个选项，然后单击Download Theme按钮即可。下载后的样式表文件及图像被打包在一个.zip文件中，将该文件解压缩至适当文件夹后，即可使用它们。例如，通过选择不同的颜色和纹理，就可以在几分钟内把前面的对话框外观修改成如图7-11所示。

7.4.1　效果 - 图9

图　7-11