JQuery如何自定义插件——$.fn的使用

页面导航:首页 > 网络编程 > JavaScript > JQuery如何自定义插件——$.fn的使用

JQuery如何自定义插件——$.fn的使用

来源: 作者: 时间:2016-02-05 11:06 【

JQuery提供了很多多的插件,粗略一搜,发现还不能用很多来形容:点了几个看了看,发现都相当精美,web开发需要的更多的是审美,而不是JS,只能说JS只是个基础吧。简直是开发者的福

 

JQuery提供了很多多的插件,粗略一搜,发现还不能用很多来形容:

 

 

 

\

 

 

点了几个看了看,发现都相当精美,web开发需要的更多的是审美,而不是JS,只能说JS只是个基础吧。

 

 

简直是开发者的福音啊。但是,这么多插件有时候也并不是都满足我们的需求,比如,有时候我们仅仅需要一个轮船的发动机,现在我们却只有轮船,我们还需要把轮船拆开,或者有的时候我们需要的部件根本没有,这时候,我们就需要自己动手啦。

 

例如,我以前写过一个Tab控件,现在要把它做成插件,让我们来一起看下这个小Demo:

 

 

首先,写单独的JS文件:

 

 

 

// JavaScript Document


//$.fn 是扩展插件的方法

(function($){   //形成闭包,将作用域进行限定
		  
		  
		$.fn.miaovTab=function(){
			
			var This=this;
			$(this).find('input').click(function(){
			
				$(This).find('input').attr('class','');
				$(This).find('div').fadeOut();
				
				
				$(this).attr('class','active');
				$(This).find('div').eq($(this).index()).fadeIn();
				

			});
			

			
			};
		  
		  
		  
 })(jQuery);
	
	
	
	

 

 

 

 

然后,我们在页面中,加入如下代码:

 

 

 

 





<script type=text/javascript src=E:各类工程文件BS学习jqueryjqueryjquery-1.7.2.min.js>
</script><script language=JavaScript type=text/javascript src=JS插件示例.js></script><script>
$(function(){
$('#div1').miaovTab();
});
</script>
11111
22222
33333


 

 

当我们在浏览器中查看时,可以点击3个按钮,做出Tab的切换效果。

 

 

\

 

 

now,练习过制作插件,当下次遇到不合适的插件时,我们可以手写或者将部分从Demo中拿出来,然后用这些代码制作成自己的轻量级插件。

 

 

 

 

 

 

 

 

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<