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/