第15章 插件

学习要点：
1.插件概述
2.验证插件
3.自动完成插件
4.自定义插件

插件(Plugin)也成为 jQuery 扩展(Extension)，是一种遵循一定规范的应用程序接口编写出来的程序。目前 jQuery 插件已超过几千种，由来自世界各地的开发者共同编写、验证和完善。而对于 jQuery 开发者而言，直接使用这些插件将快速稳定架构系统，节约项目成本。

一．插件概述
插件是以 jQuery 的核心代码为基础，编写出复合一定规范的应用程序。也就是说，插件也是 jQuery 代码，通过 js 文件引入的方式植入即可。
插件的种类很多，主要大致可以分为：UI 类、表单及验证类、输入类、特效类、Ajax类、滑动类、图形图像类、导航类、综合工具类、动画类等等。
引入插件是需要一定步骤的，基本如下：
1.必须先引入 jquery.js 文件，而且在所有插件之前引入；
2.引入插件；
3.引入插件的周边，比如皮肤、中文包等。

二．验证插件
Validate.js 是 jQuery 比较优秀的表单验证插件之一。这个插件有两个 js 文件，一个是主文件，一个是中文包文件。使用的时候，可以使用 min 版本；在这里，为了教学，我们未压缩版本。
验证插件包含的两个文件分别为：jquery.validate.js 和 jquery.validate.messages_zh.js。

//HTML 内容
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="jquery.validate.messages_zh.js"></script>
<form>
<p>用 户 名： <input type="text" class="required" name="username" minlength="2" />
*</p>
<p>电子邮件：<input type="text" class="required email" name="email" /> *</p>
<p>网 址：<input type="text" class="url" name="url" /></p>
<p><input type="submit" value="提交" /></p>
</form>

 

//jQuery 代码
$(function () {
$('form').validate();
});

 

只要通过 form 元素的 jQuery 对象调用 validate()方法，就可以实现“必填” 、 “不能小于两位” 、 “电子邮件不正确” 、 “网址不正确”等验证效果。除了 js 端的 validate()方法调用，表单处也需要相应设置才能最终得到验证效果。
1.必填项：在表单设置 class="required"；
2.不得小于两位：在表单设置 minlength="2"；
3.电子邮件：在表单中设置 class="email";
4.网址：在表单中设置 class="url"。

注意：本章就简单的了解插件的使用，并不针对某个功能的插件进行详细讲解。比如验证插件 validate.js，它类似与 jQuery 一样，同样具有各种操作方法和功能，需要进行类似手册一样的查询和讲解。所以，我们会在项目中再去详细讲解使用到的插件。

三．自动完成插件
所谓自动完成，就是当用户输入部分字符的时候，智能的搜索出包含字符的全部内容。比如：输入 a，把匹配的内容列表展示出来。

//HTML 内容
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>
<link rel="stylesheet" href="jquery.autocomplete.css" type="text/css" />

 

//jQuery 代码
var user = ['about', 'family', 'but', 'black'];
$('form input[name=username]').autocomplete(user, {
minChars : 0 //双击显示全部数据
});

 
注意：这个自动完成插件使用的 jQuery 版本较老，用了一些已被新版本的 jQuery 废弃删除的方法，这样必须要向下兼容才能有效。所以，去查找插件的时候，要注意一下他坚持的版本。

四．自定义插件
前面我们使用了别人提供好的插件， 使用起来非常的方便。 如果市面上找不到自己满意的插件，并且想自己封装一个插件提供给别人使用。那么就需要自己编写一个 jQuery 插件了。

按照功能分类，插件的形式可以分为一下三类：
1.封装对象方法的插件； （也就是基于某个 DOM 元素的 jQuery 对象，局部性）
2.封装全局函数的插件； （全局性的封装）
3.选择器插件。(类似与.find())

经过日积月累的插件开发， 开发者逐步约定了一些基本要点， 以解决各种因为插件导致的冲突、错误等问题，包括如下：
1.插件名推荐使用 jquery.[插件名].js，以免和其他 js 文件或者其他库相冲突；
2.局部对象附加 jquery.fn 对象上，全局函数附加在 jquery 上；
3.插件内部，this 指向是当前的局部对象；
4.可以通过 this.each 来遍历所有元素；
5.所有的方法或插件，必须用分号结尾，避免出现问题；
6.插件应该返回的是 jQuery 对象，以保证可链式连缀；
7.避免插件内部使用$，如果要使用，请传递 jQuery 进去。

按照以上的要点，我们开发一个局部或全局的导航菜单的插件。只要导航的<li>标签内部嵌入要下拉的<ul>，并且 class 为 nav，即可完成下拉菜单。

//HTML 部分
<ul class="list">
<li>导航列表
<ul class="nav">
<li>导航列表 1</li>
<li>导航列表 1</li>
<li>导航列表 1</li>
<li>导航列表 1</li>
<li>导航列表 1</li>
<li>导航列表 1</li>
</ul>
</li>
<li>导航列表
<ul class="nav">
<li>导航列表 2</li>
<li>导航列表 2</li>
<li>导航列表 2</li>
<li>导航列表 2</li>
<li>导航列表 2</li>
<li>导航列表 2</li>
</ul>
</li>
</ul>

 

//jquery.nav.js 部分
;(function ($) {
$.fn.extend({
'nav' : function (color) {
$(this).find('.nav').css({
listStyle : 'none',
margin : 0,
padding : 0,
display : 'none',
color : color
});
$(this).find('.nav').parent().hover(function () {
$(this).find('.nav').slideDown('normal');
}, function () {
$(this).find('.nav').stop().slideUp('normal');
});
return this;
}
});
})(jQuery);