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/







                

目录
相关文章
|
20天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
59 21
|
20天前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
48 16
|
15天前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
40 9
|
18天前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
|
20天前
|
JavaScript
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。
|
19天前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。
|
16天前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
24 2
|
16天前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
|
20天前
|
JavaScript
jQuery Lightbox和弹出层插件flashy
Flashy.js是一款响应式jQuery Lightbox和弹出层插件
|
18天前
|
JavaScript 容器
jQuery消息通知显示插件
MessageNotifyPlugin是一款简单的jQuery消息通知显示插件。该jQuery消息通知显示插件能够自动生成最新消息和提醒消息两个消息通知按钮。并且可以设置消息的是否已读状态等
23 2