Jquery——Day5（插件—案例：制作导航插件）

1、插件描述

插件的种类，主要大致可以分为：UI类、表单及验证类、输入类、特效类、Ajax类、滑动类、图形图像类、导航类、综合工具类、动画类。

引入插件需要一定的步骤，如下：

（1）必须引入jquery.js文件，而且在所有插件之前引入；

（2）引入插件；

（3）引入插件的周边，比如皮肤、中文包等。

<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<script src="jquery.validate.message_zh.js"></script>

<form action="index.html">
<p>用户名：<input type="text" class="required" minlength="2" name="user" />(*)</p>
<p>电子邮件：<input type="text" class="required email "  name="email" />(*)</p>
<p>用户名：<input type="text" class="url"  name="url" /></p>
<input type="submit" value="提交" />
</form>

注意：由于在validate.js中会显示出三国语言，即加载“validate.message_zh.js”，可以自动将其转换为中文格式。

2、自动完成插件

所谓自动完成，就是当用户输入部分字符的时候，智能的搜索出包含字符的全部内容。

$(function(){
$('form').validate();
var user=['about','white','red'];
$('form input[name=user]').autocomplete(user,{
minChars();
});
});

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

若要制作导航插件，首先需要明白以下几个基本的要点：
（1）插件名需要使用jQuery.[插件名].js，以免和其他的js文件或者其他库冲突;
（2）局部对象附加jquery.fn对象，全局函数附加在jQuery上；
（3）插件内部，this指向是当前的局部对象；
（4）可以通过this.each遍历所有的元素；
（5）所有的方法或插件，必须用分号结尾，避免出现问题；
（6）插件返回的是jQuery对象，以保证链式连缀；

（7）避免插件内部使用$，如果使用，请传递jQuery进去。

在HTML中，新建一个nav.html

<ul class="list">
<li>导航列表
<ul class="nav">
<li>导航列表</li>
<li>导航列表</li>
<li>导航列表</li>
</ul>
</li>
<li>导航列表
<ul class="nav">
<li>导航列表</li>
<li>导航列表</li>
<li>导航列表</li>
</ul>
</li>
<li>导航列表
<ul class="nav">
<li>导航列表</li>
<li>导航列表</li>
<li>导航列表</li>
</ul>
</li>
</ul>

设置其样式，nav.css

.list{
list-style:none;
margin:0;padding:0;
font-size:13px;
color:#fff;
width:500px;
margin:500px auto;
}

.list li{
float:left;
width:100px;
height:30px;
line-height:30px;
text-align:center;
background:#333;
cursor:pointer;
}

同时，设置nav.js

$(function(){
$('.nav').css({
'list-style':'none',
'margin':0,
'padding':0,
'display':none
});

$('.nav').parent().hover(function(){
$(this).find('.nav').slideDown(normal);
},function(){
$(this).find('.nav').stop().slideUp(normal);
});

});

将上述nav.js代码转换为插件jquery.nav.js

;(function($){
$.extend({
'nav':function(){
$(this).find('nav').css({
'list-style':'none',
'margin':0,
'padding':0,
'display':none
});

$(this).find('nav').parent().hover(function(){
$(this).find('.nav').slideDown(normal);
},function(){
$(this).find('.nav').stop().slideUp(normal);
});
}
});
})(jQuery);