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

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


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




                


        

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



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


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



         首先,写单独的JS文件:



       

// JavaScript Document


<span style="color:#FF0000;"><strong>//$.fn 是扩展插件的方法</strong></span>

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

       

       


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




     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQ插件示例</title>

<style>

	#div1 div{width:200px; height:200px; border:1px #000000 solid; display:none;position:absolute;}
	.active{background:red}


</style>

</head>
<script type="text/javascript" src="E:\各类工程文件\BS学习\jquery\jquery\jquery-1.7.2.min.js">

</script>


<script language="JavaScript" type="text/javascript" src="JS插件示例.js"></script>


<script>

	$(function(){
	
		$('#div1').miaovTab();
			
	});


</script>



<body>

	<div id="div1">
	
		<input class="active" type="button" value="1"/>
		<input type="button" value="2"/>
		<input type="button" value="3"/>
		<div style="display:block">11111</div>
		<div>22222</div>
		<div>33333</div>
		
		
		
	
	</div>
	

</body>
</html>



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


   

          


                    

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



              PS:附上一个非常漂亮的JQuery插件库:http://www.jq22.com/







                

目录
相关文章
|
JavaScript 前端开发
前端基础 - JQuery自定义校验器
前端基础 - JQuery自定义校验器
69 0
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
58 0
|
6月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
1月前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
59 2
|
5月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
61 1
|
1月前
|
JavaScript 前端开发
jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒)
44 4
jQuery Growl 插件(消息提醒)
|
1月前
|
存储 JSON JavaScript
jQuery Cookie 插件
jQuery Cookie 插件
40 4
jQuery Cookie 插件
|
12天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
27 0
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
Validform jQuery插件详解
【8月更文挑战第21天】
|
5月前
|
JavaScript Perl PHP
一篇文章讲明白jQuery插件之jqueryeditableplugin
一篇文章讲明白jQuery插件之jqueryeditableplugin
34 0