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