第 7 章　使用插件 - 7.2　使用插件 - 《jQuery基础教程（第4版）》

7.2　使用插件

7.2　使用插件

使用jQuery插件很简单。只要找到插件的URL，在HTML中引用它，然后在脚本中使用即可。为了演示这个过程，我们需要找一个插件作为例子。

jQuery的Cycle插件就是一个不错的例子。这个插件是由Mike Alsup开发的，通过它可以把静态的页面元素变成交互式的幻灯片。与其他广受欢迎的插件类似，这个插件能够满足各种复杂的需求，但使用起来却很简单。

7.2.1　下载并包含Cycle插件

可以在jQuery插件注册表或它的主页http://www.malsup.com/jquery/cycle/中找到Cycle插件。在下载页面中可以下载到这个插件的完整版和简化版。我们在这里下载使用完整版，文件名是jquery.cycle.all.js。

把文件下载到站点目录之后，需要在文档的<head>中引入这个插件。此时，注意把引入它的代码放在引入jQuery主文件的代码后面，但要位于使用这个插件的脚本前面。

<head>
  <meta charset="utf-8">
  <title>jQuery Book Browser</title>
  <link rel="stylesheet" href="07.css" type="text/css" />
  <script src="jquery.js"></script>
  <script src="jquery.cycle.all.js"></script>
  <script src="07.js"></script>
</head>

这样就安装了第一个插件。安装插件与安装jQuery一样简单。然后，就可以在脚本中使用这个插件了。

7.2.2　调用插件提供的方法

Cycle插件可以作用于页面中的任何一组同辈元素。为展示这一点，我们需要一个简单的HTML文档，文档中是一个包含图书封面和相关信息的列表，可以添加到HTML文档的主体中：

<ul id="books">
  <li>
    <img src="images/jq-game.jpg" alt="jQuery Game Development Essentials" />
    <div class="title">jQuery Game Development Essentials</div>
    <div class="author">Salim Arsever</div>
  </li>
  <li>
    <img src="images/jqmobile-cookbook.jpg" alt="jQuery Mobile Cookbook" />
    <div class="title">jQuery Mobile Cookbook</div>
    <div class="author">Chetan K Jain</div>
  </li>
  ...
</ul>

在CSS文件中写一些样式，就可以让这些图书封面并列地显示出来，如图7-1所示。

图　7-1

通过 Cycle插件可以将这个列表转换成可以交互的幻灯片。在 DOM 中适当的容器上调用.cycle()方法，就可以实现这一转换，参见代码清单7-1。

代码清单7-1

$(document).ready(function() {
  $('#books').cycle();
});

这个语法简单得不能再简单了。和之前使用其他内置的jQuery方法一样，我们也在一个包含DOM元素的jQuery对象上调用了.cycle()。即使没有提供任何参数，.cycle()也可以帮我们完成转换工作。其中包括修改页面的样式，以便每次只显示一个列表项，然后每4秒就以交叉淡入淡出的方式切换到下一个列表项，如图7-2所示。

图　7-2

如此简单易用是典型的jQuery插件的特征。就这么一个简简单单的方法调用，就可以实现专业实用的效果。不过，与其他插件一样，Cycle也提供了很多自定义的选项，可以通过配置改变效果。

7.2.3　为插件方法指定参数

为插件方法传递参数与向jQuery方法中传递参数没有什么不一样。多数情况下，传递的参数是放在一个对象中的，对象由参数的键值对构成（正如第6章为$.ajax()传递的参数那样）。Cylce可以接受的参数非常之多，仅.cycle()方法本身就可以接受50个配置选项。这个插件的文档详细说明了每个选项的作用，有的还有详细的示例。

我们可以修改Cycle插件的两个幻灯片之间的播放速度和动画样式，修改幻灯片变换的触发方式，还可以使用回调函数针对动画完成作出响应。为了演示某些功能，我们为这个方法提供了三个简单的选项，参见代码清单7-2。

代码清单7-2

$(document).ready(function() {
  $('#books').cycle({
    timeout: 2000,
    speed: 200,
    pause: true
  });
});

第一个timeout选项用于指定切换幻灯片之间等待的毫秒数（2000），而speed决定切换本身要花的毫秒数（200）。在把pause设置为true的情况下，幻灯片会在鼠标进入时暂停播放，这在幻灯片中包含可以单击的链接时非常有用。

7.2.4　修改参数默认值

即使不给Cycle传递任何参数，也可以得到非常棒的效果。为此，这个插件为未提供的选项维护了一组默认值。

Cycle其实也遵循了一个常见的模式，那就是把所有默认值放在一个对象中。具体到Cycle来说，包含所有默认选项的对象是$.fn.cycle.defaults。如果有插件像这样把默认值保存在一个公共可见的地方，那么我们就可以在自己的脚本中修改它的默认值，以便在多次调用插件时把代码写得更简单，因为不用每次都通过选项来指定新值了。修改默认值非常简单，如代码清单7-3所示。

代码清单7-3

$.fn.cycle.defaults.timeout = 10000;
$.fn.cycle.defaults.random = true;
 
$(document).ready(function() {
  $('#books').cycle({
    timeout: 2000,
    speed: 200,
    pause: true
  });
});