自己动手开发jQuery插件


因为工作需要,所以这几天琢磨了一下关于jQuery插件开发的问题,经过一天鏖战,终于完成自己动手做的第一个jQuery插件,对于俺这种见了css就头痛的人来说,一天时间8小时,保守估计有5个小时在弄css(我css文盲级别,形容得还不够贴切,如果说文盲不会写字,只会说话,那我是连话都不会说的级别。),好了,废话少说,切入正题。


51CTO推荐专题:jQuery从入门到精通 jQuery给力插件大阅兵


首先要了解jQuery插件开发分两种,1.类级别的插件开发。2.对象级别插件开发。


什么? 你居然问什么是类级别和什么是对象级别?


类级别你可以理解为拓展jquery类,最简单的$.post(...);


对象级别则可以理解为基于对象的拓展,如$("#Me").fuck(...); 这里这个fuck呢,就是基于对象的拓展了。点到即止,想深入的童鞋请花RMB买书Or网上查资料,书上比俺介绍得更清楚。so...Next...


至于您要写一个什么东东呢?就轮到前面提到的类级别和对象级别的造型登场了,因为这写法大千世界无奇不有,千奇百怪,各有千秋,写法规范也不统一,俺就按俺觉得最简便的方法写了,Hava a Look!

  1. <script type="text/javascript">  
  2.         jQuery.msg = function () {  
  3.             alert("123");  
  4.      };           
  5.     </script>  
  6.     <script type="text/javascript">  
  7.         $(function () {  
  8.             $.msg();  
  9.         });  
  10. </script> 

类级别写法:jQuery.插件名称=function(){.....};


调用方法:$.插件名称();


暴露参数这些东西,先暂时不提到。一步步来..


上面这玩意儿呢,弹出对话框插件,这么说,是先理解要紧,什么是插件,什么是类级别的插件?来看一下页面启动的效果,上图上真相,你懂的..





来比较一下对象级别插件写法:Go on!

  1. (function($) {  
  2. $.fn.pluginName = function() {  
  3. // 代码区域。  
  4. };  
  5. })(jQuery); 

对象级别写法:$.fn.插件名称 = function(){};多了一个fn,没错,是fn! fn!!! fn!!!


调用方法:$("#Me").插件名称();


稍微说一下,$.插件名称();是通过$访问调用jquery中的全局函数,直接可以通过jquery或者美元$调用,从而实现一些效果。


$("#Me").插件名称();是通过一个jquery对象所调用的一个函数,什么? 你居然发现这个写法外面一层多了个东东? 阿? 你问怎么回事?


The First,我们必须先了解一下闭包这个玩意儿的造型(框架),Look!,这就是传说中用来开发jQuery插件的东东

  1. function($){  
  2.     //这里是您写东东的地方,不收地税,工商税,个人所得税等..放心大胆使用。  
  3. })(jQuery); 

(function($){ //这里是您写东东的地方,不收地税,工商税,个人所得税等..放心大胆使用。})(jQuery);


这里function 后面的$参数,形参,在函数体内部的使用呢,$就是当前您当前整在调用该函数的对象了,这样就能干很多事了....你懂的。


用一个tabs面板切换插件来详细演示一下jQuery对象级别插件的具体开发,直接上代码。


首先上HTML:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <script src="jquery-1.6.2.min.js" type="text/javascript"></script>  
  6.     <script src="jquery.tabs.js" type="text/javascript"></script>  
  7.     <link href="tabs.css" rel="stylesheet" type="text/css" />  
  8.     <script type="text/javascript">  
  9.         $(function () {  
  10.             $("#mytabs").tabs();  
  11.         });  
  12.     </script>  
  13. </head>  
  14. <body>  
  15.     <!--tabs示例-->  
  16.     <div id="mytabs">  
  17.         <!--选项卡区域-->  
  18.         <ul>  
  19.             <li><a href="#tabs1">选项1</a></li>  
  20.             <li><a href="#tabs2">选项2</a></li>  
  21.             <li><a href="#tabs3">选项3</a></li>  
  22.         </ul>  
  23.         <!--面板区域-->  
  24.         <div id="tabs1">11111</div>  
  25.         <div id="tabs2">22222</div>  
  26.         <div id="tabs3">33333</div>  
  27.     </div>  
  28. </body>  
  29. </html> 

再上插件源码:

  1. /*  
  2. tabs面板插件,版本1.0(2011.08.24)  
  3. 用法:$("#myDiv").tabs({switchingMode:"click"});  
  4. 参数解释:switchingMode是面板切换的模式,如switchingMode:"mouseover"则鼠标移动至选项卡切换面板,默认为click。  
  5. 整体tabs骨架不变,依然是常用的结构如下:  
  6. <div id="tabs"> 
  7.     选项卡区域ul  
  8.     <ul> 
  9.         <li><a href="#div1">选项1</a></li> 
  10.         <li><a href="#div2">选项2</a></li> 
  11.     </ul> 
  12.     面板区域div  
  13.     <div id="div1">面板1</div> 
  14.     <div id="div2">面板2</div> 
  15. </div> 
  16.  
  17. 样式:此样式为默认无任何效果样式,可根据需要修改插件样式。  
  18.  
  19. */  
  20. ; (function ($) {  
  21.     $.fn.tabs = function (options) {  
  22.         var defualts = { switchingMode: "click" };  
  23.         var opts = $.extend({}, defualts, options);  
  24.         var obj = $(this);        
  25.         var clickIndex = 0;  
  26.         obj.addClass("tabsDiv");  
  27.         $("ul li:first", obj).addClass("tabsSeletedLi");  
  28.         $("ul li", obj).not(":first").addClass("tabsUnSeletedLi");  
  29.         $("div", obj).not(":first").hide();  
  30.         $("ul li", obj).bind(opts.switchingMode, function () {  
  31.             if (clickIndex != $("ul li", obj).index($(this))) {  
  32.                 clickIndex = $("ul li", obj).index($(this));  
  33.                 $(".tabsSeletedLi", obj).removeClass("tabsSeletedLi").addClass("tabsUnSeletedLi");  
  34.                 $(this).removeClass("tabsUnSeletedLi").addClass("tabsSeletedLi");  
  35.                 var divid = $("a", $(this)).attr("href").substr(1);  
  36.                 $("div", obj).hide();  
  37.                 $("#" + divid, obj).show();  
  38.             };  
  39.         });  
  40.     };  
  41. })(jQuery); 

接下来上插件样式:

  1. body{background-color: black;}          
  2. .tabsDiv{width: 500px;height: 350px;margin-top: 0px;margin-left: 0px;}  
  3. .tabsDiv ul{width: 500px;height: 20px;list-style: none;background-color: black;margin-bottom: 0px;margin: 0px;padding: 0px;}  
  4. .tabsDiv div{width: 500px;height: 330px;background-color: white;}  
  5. .tabsSeletedLi{width: 100px;height: 20px;background-color: white;float: left;text-align: center;}  
  6. .tabsSeletedLi a{width: 100px;height: 20px;color: black;}  
  7. .tabsUnSeletedLi{width: 100px;height: 20px;background-color: black;float: left;text-align: center;}  
  8. .tabsUnSeletedLi a{width: 100px;height: 20px;color: white;} 

最终效果图,你懂的:










原文:http://www.cnblogs.com/JohnStart/archive/2011/08/24/jQueryPlugin.html




标签:

友情链接
轻松育儿世界奇观
苏ICP备16066217号-2