[转]jquery插件简明制作教程

发布于，归属于jquery教程。 沙发还空着，抢！ 共有253人围观    

这里通过制作一个jquery菜单插件，抛砖引玉说明如何创建jquery插件。

先来看下没有使用jquery插件机制，编写出来的代码。

  1. $(document).ready(function() {
  2.  
  3. $('ul#menu li:even').addClass('even');
  4.  
  5. $('ul#menu li a').mouseover(function() {
  6.  
  7.    $(this).animate( { paddingLeft:"20px" }, { queue:false, duration:500 });
  8.  
  9. }).mouseout(function() {
  10.  
  11.    $(this).animate( { paddingLeft:"0" }, { queue:true, duration:500 });
  12.  
  13. }).click(function() {
  14.  
  15.    $(this).animate( { fontSize:"20px" }, { queue:false, duration:500 });
  16. });
  17.   
  18. });

虽然实现了功能，但代码一点也不优雅，没有任何的封装，没有便利的接口，不具有扩展性。

我们来把上面的代码整合成jquery的插件

  1. $(document).ready(function() {  
  2.       
  3.     $(#menu).animateMenu({  
  4.         padding:20  
  5.     })  
  6.               
  7. });

有经常使用jquery插件的朋友就知道，这是jquery特有的但非常有效的写法。简洁、便利的接口、可移植。

此插件的接口有了，接下来具体来看其实现过程

  1. //为了避免冲突，你需要一个匿名函数来包装你的函数  
  2. (function($){  
  3.  
  4.     //给jQuery附加一个新的方法
  5.    $.fn.extend({   
  6.           
  7.         //这儿就是你要开发插件的名子
  8.         pluginname: function() {  
  9.  
  10.            //迭代当前匹配元素集合
  11.             return this.each(function() {  
  12.               
  13.                 //插入自己的代码 
  14.               
  15.             });  
  16.         }  
  17.     });  
  18.       
  19. //传递jQuery参数到函数中，   
  20. //因此我们能使用任何有效的javascipt变量名来替换“$“符号。但是我们将坚持使用 $ (我喜欢美元符号：)
  21. )(jQuery);

以上代码是jquery插件的一个通用写法。

编写接口

  1. (function($){  
  2.  
  3.     $.fn.extend({   
  4.           
  5.         //options 就是供用户配置的选项
  6.         pluginname: function(options) {  
  7.  
  8.  
  9.             //设置默认值
  10.             var defaults = {  
  11.                 padding: 20,  
  12.                 mouseOverColor : '#000000',  
  13.                 mouseOutColor : '#ffffff'  
  14.             }  
  15.            
  16.             //注意这里的extend的用法      
  17.             var options = $.extend(defaults, options);  
  18.  
  19.             return this.each(function() {  
  20.                 var o = options;  
  21.                   
  22.                 //code to be inserted here  
  23.                 //you can access the value like this  
  24.                 alert(o.padding);  
  25.               
  26.             });  
  27.         }  
  28.     });  
  29.       
  30. })(jQuery);

来看其完整的js代码

  1. (function($){  
  2.     $.fn.extend({   
  3.         //plugin name - animatemenu  
  4.         animateMenu: function(options) {  
  5.  
  6.             //Settings list and the default values  
  7.             var defaults = {  
  8.                 animatePadding: 60,  
  9.                 defaultPadding: 10,  
  10.                 evenColor: '#ccc',  
  11.                 oddColor: '#eee'  
  12.             };  
  13.               
  14.             var options = $.extend(defaults, options);  
  15.           
  16.             return this.each(function() {  
  17.                 var o =options;  
  18.                   
  19.                 //Assign current element to variable, in this case is UL element  
  20.                 var obj = $(this);                
  21.                   
  22.                 //Get all LI in the UL  
  23.                 var items = $("li", obj);  
  24.                     
  25.                 //Change the color according to odd and even rows  
  26.                 $("li:even", obj).css('background-color', o.evenColor);               
  27.                 $("li:odd", obj).css('background-color', o.oddColor);                       
  28.                     
  29.                 //Attach mouseover and mouseout event to the LI    
  30.                 items.mouseover(function() {  
  31.                     $(this).animate({paddingLeft: o.animatePadding}, 300);  
  32.                       
  33.                 }).mouseout(function() {  
  34.                     $(this).animate({paddingLeft: o.defaultPadding}, 300);  
  35.                 });  
  36.                   
  37.             });  
  38.         }  
  39.     });  
  40. })(jQuery);

设置四个可配置参数
1）、animatePadding : 给animate 效果设置”padding“值
2）、defaultPadding : 给padding设置默认的值
3）、evenColor :设置偶数行事件的颜色
4）、oddColor : 设置奇数行事件的颜色

当然还少不了建立菜单结构

  1. <ul id="menu">  
  2.     <li>Home</li>  
  3.     <li>Posts</li>  
  4.     <li>About</li>  
  5.     <li>Contact</li>  
  6. </ul>
（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

同类