15.jQuery 简单插件

   插件(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"。

三．自动完成插件

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

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 = ['xxx', 'axa', 'ews', 'bgt'];
$('form input[name=username]').autocomplete(user, {

   minChars : 0    //双击显示全部数据

});

四．自定义插件

   如果市面上找不到自己满意的插件，并且想自己封装一个插件提供给别人使用。那么

就需要自己编写一个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 进去。

eg: 

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);