实用简单的jquery插件教程

概述:这篇教程将介绍如何创建一个简单的jquery插件,并且允许用户改变一些设置。我用的是我自己的jQuery教程-(Menu with jQuery Animate effect)并把菜单转换成插件。

1、引言

         开发jQuery插件是一个高级的话题对于jQuery初学者。这个月,我一直在加强学习jQuery。尽管我学习如何把javascript代码和html文档分开。当我看到我自己的javascipt文件时,我并不满意。它太脏乱,所以我决定更近一步-学习如何开发jQuery插件来整理javascript文件。

     这个插件是基于我以前的教程- Navigation List menu + jQuery Animate Effect Tutorial 。上次,我写编写的脚本都把代码放到 document.ready段落中,就像下面的代码。

 

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


但是现在 我想把代码写成类似如下格式:

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

这样的格式看起来更简练,而且这些脚本可以在另一个工程重用。

 

2、插件结构

    jQuery 官方网站在 Plugins/Authoring页面提供了非常详细的说明。 但是我发现它非常难以理解。

    不过没关系,为了使编写插件更容易,使用下面的小段用来开发插件将是一个非常好的结构。

 

 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

 

 

2、带有可选项的插件

如果你看了第一步的介绍,"padding"值对于这个插件是用户配置的。他有利于一些设置,所以用户能改变设置根据他们自己的需要。请确定你为每一个变量指定了默认值。现在,如下的代码:

 1 ( function ($) {   
 2
 3    $.fn.extend({    
 4           
 5        //pass the options variable to the function   
 6        pluginname: function(options) {   
 7
 8
 9            //Set the default values, use comma to separate the settings, example:   
10            var defaults = {   
11                padding: 20,   
12                mouseOverColor : '#000000',   
13                mouseOutColor : '#ffffff'   
14            }
   
15                   
16            var options = $.extend(defaults, options);   
17
18            return this.each(function() {   
19                var o = options;   
20                   
21                //code to be inserted here   
22                //you can access the value like this   
23                alert(o.padding);   
24               
25            }
);   
26        }
   
27    }
);   
28       
29}
)(jQuery); 

 

3、动态菜单插件

现在你学习了插件的结构。紧接着是我基于以前教程的开发的插件。插件它允许4个配置:

     1)、 animatePadding : 给animate 效果设置”padding“值
     2)、 defaultPadding :   给padding设置默认的值            

      3)、evenColor :设置偶数行事件的颜色
      4)、oddColor : 设置奇数行事件的颜色

 

 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);   
41
42

 

 

4、完整的源代码

    你可以保存这个插件再一个单独的文件。(例如:jquery.animatemenu.js).在这个教程中,我把脚本放到html文档中

  

Code

我希望这个教程能让你更容易的理解jQuery插件

你可能感兴趣的:(jquery插件)