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

清疚 2022-07-12 14:55 225阅读 0赞

1、插件描述

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

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

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

（2）引入插件；

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

注意：由于在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

设置其样式，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);