7.3　其他形式的插件

插件并不局限于提供更多的jQuery方法，也可以扩展jQuery的功能，甚至修改已有的特性。插件也可以改变jQuery库其他部分的运作方式。例如，有些插件为动画提供缓动风格（easing style），有的插件能够响应用户动作触发更多的jQuery事件。Cycle插件通过添加新的自定义选择符提供了一个类似的增强特性。

7.3.1　自定义选择符

支持自定义选择符表达式的插件扩展了jQuery内置选择符引擎的功能，可以让我们以全新的方式查找元素。Cycle就支持一种自定义选择符，下面我们就来体验一下这个功能。

Cycle的幻灯片通过调用.cycle('pause')和.cycle('resume')可以暂停和恢复播放。而通过以下代码，可以轻松地添加几个按钮来控制幻灯片，参见代码清单7-4。

代码清单7-4

$(document).ready(function() {
  var $books = $('#books');
  var $controls = $('<div id="books-controls"></div>');
  $controls.insertAfter($books);
  $('<button>Pause</button>').click(function(event) {
    event.preventDefault();
    $books.cycle('pause');
  }).appendTo($controls);
  $('<button>Resume</button>').click(function(event) {
    event.preventDefault();
    $books.cycle('resume');
  }).appendTo($controls);
});

假设页面中有多组幻灯片，我们想通过Resume按钮恢复页面中所有暂停的幻灯片。那就需要找到页面中所有被暂停的幻灯片所在的<ul>元素，然后全部恢复。利用Cycle自定义的:paused选择符，可以轻松地实现这个功能，参见代码清单7-5。

代码清单7-5

$(document).ready(function() {
  $('<button>Resume</button>').click(function(event) {
    event.preventDefault();
    $('ul:paused').cycle('resume');
  }).appendTo($controls);
});

Cycle在加载之后，$('ul:paused')就会创建一个jQuery对象，引用页面中所有暂停的幻灯片，然后我们就可以按照意愿去操作它们。类似这样的由插件提供的选择符扩展，能够与jQuery标准的选择符随意地结合使用。不难想象，通过选择适当的插件，可以把jQuery塑造得更符合我们的要求。

7.3.2　全局函数插件

很多流行的插件在jQuery命名空间中提供了一些新的全局函数。在插件提供的功能与页面中的DOM元素无关，因而不适合扩展标准jQuery方法的情况下，这种模式是很常见的。例如，Cookie插件（https://github.com/carhartl/jquery-cookie）提供了读写页面中cookie值的接口。而这个功能是通过$.cookie()函数提供的，这个函数可以取得或设置个别的cookie值。

例如，假设我们想在用户单击幻灯片的Pause按钮时保持暂停状态，当用户离开当前页面再返回时仍然保持暂停。那么，在加载Cookie插件后，只要将cookie名作为参数就可以读取到cookie的值了，如代码清单7-6所示。

代码清单7-6

if ( $.cookie('cyclePaused') ) {
  $books.cycle('pause');
}

这里，我们检查名为cyclePaused的cookie是否存在。此时这个cookie的值是什么并不重要。如果存在这个cookie，则暂停播放幻灯片。把这个暂停条件判断语句插到对.cycle()的调用后面，就可以使幻灯片暂停在第一幅图像的状态，直到用户在某一时刻单击Resume按钮。

当然，由于我们还没有设置cookie的值，因此幻灯片会照常播放所有图像。设置cookie就和取得cookie的值一样简单，只要传递一个字符串作为第二个参数即可，参见代码清单7-7。

代码清单7-7

var $controls = $('<div id="books-controls"></div>')
  .insertAfter($books);
$('<button>Pause</button>').click(function(event) {
  event.preventDefault();
  $books.cycle('pause');
  $.cookie('cyclePaused', 'y');
}).appendTo($controls);
$('<button>Resume</button>').click(function(event) {
  event.preventDefault();
  $('ul:paused').cycle('resume');
  $.cookie('cyclePaused', null);
}).appendTo($controls);

在单击Pause按钮时，将cookie的值设置为y，而在单击Resume按钮时，通过传递null将这个cookie删除。默认情况下，cookie的值将在会话期间保持，直到关闭浏览器标签页为止。此外，默认情况下，cookie还是与设置它的页面关联的。如果想改变这个默认设置，可以为这个函数提供一个选项对象作为第三个参数。这是jQuery插件乃至jQuery核心函数的典型使用模式。

比如，要想让cookie在整个站点中都可以访问到，而且让它在7天之后再过期，就可以像这样来调用函数：$.cookie('cyclePaused', 'y', {path: '/', expires: 7})。要了解这方面的更多信息，以及调用$.cookie()时可以使用的选项，请参考这个插件的文档。