概述：這篇教程將介紹如何創(chuàng)建一個簡單的jquery插件，并且允許用戶改變一些設置。我用的是我自己的jQuery教程－（Menu with jQuery Animate effect）并把菜單轉換成插件。

1、引言

         開發(fā)jQuery插件是一個高級的話題對于jQuery初學者。這個月，我一直在加強學習jQuery。盡管我學習如何把javascript代碼和html文檔分開。當我看到我自己的javascipt文件時，我并不滿意。它太臟亂，所以我決定更近一步－學習如何開發(fā)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});

但是現(xiàn)在 我想把代碼寫成類似如下格式：

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

這樣的格式看起來更簡練，而且這些腳本可以在另一個工程重用。

2、插件結構

    jQuery 官方網站在 Plugins/Authoring頁面提供了非常詳細的說明。 但是我發(fā)現(xiàn)它非常難以理解。

    不過沒關系，為了使編寫插件更容易，使用下面的小段用來開發(fā)插件將是一個非常好的結構。

 1//為了避免沖突，你需要一個匿名函數(shù)來包裝你的函數(shù)   
 2(function($){   
 3
 4    //給jQuery附加一個新的方法
 5   $.fn.extend({    
 6           
 7        //這兒就是你要開發(fā)插件的名子
 8        pluginname: function() {   
 9
10           //迭代當前匹配元素集合
11            return this.each(function() {   
12               
13                //插入自己的代碼  
14               
15            });   
16        }   
17    });   
18       
19//傳遞jQuery參數(shù)到函數(shù)中，    
20//因此我們能使用任何有效的javascipt變量名來替換“$“符號。但是我們將堅持使用 $ (我喜歡美元符號：)
21

2、帶有可選項的插件

如果你看了第一步的介紹,"padding"值對于這個插件是用戶配置的。他有利于一些設置，所以用戶能改變設置根據他們自己的需要。請確定你為每一個變量指定了默認值?，F(xiàn)在，如下的代碼：

 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、動態(tài)菜單插件

現(xiàn)在你學習了插件的結構。緊接著是我基于以前教程的開發(fā)的插件。插件它允許4個配置：

     1）、 animatePadding : 給animate 效果設置”padding“值
     2）、 defaultPadding :   給padding設置默認的值            

      3）、evenColor :設置偶數(shù)行事件的顏色
      4）、oddColor : 設置奇數(shù)行事件的顏色

 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
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    
 2"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
 3<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">   
 4       
 5<head>   
 6    <title></title>   
 7    <script type="text/javascript" src=" http://code.jquery.com/jquery-latest.js"></script>   
 8    <script>   
 9
10(function($){   
11    $.fn.extend({    
12        //plugin name - animatemenu   
13        animateMenu: function(options) {   
14
15            var defaults = {   
16                animatePadding: 60,   
17                defaultPadding: 10,   
18                evenColor: '#ccc',   
19                oddColor: '#eee',   
20            };   
21               
22            var options = $.extend(defaults, options);   
23           
24            return this.each(function() {   
25                  var o =options;   
26                  var obj = $(this);                   
27                  var items = $("li", obj);   
28                     
29                  $("li:even", obj).css('background-color', o.evenColor);                  
30                  $("li:odd", obj).css('background-color', o.oddColor);                      
31                     
32                  items.mouseover(function() {   
33                      $(this).animate({paddingLeft: o.animatePadding}, 300);   
34                       
35                  }).mouseout(function() {   
36                      $(this).animate({paddingLeft: o.defaultPadding}, 300);   
37                       
38                  });   
39            });   
40        }   
41    });   
42})(jQuery);   
43       
44    </script>   
45       
46    <script type="text/javascript">   
47    $(document).ready(function() {   
48        $('#menu').animateMenu({animatePadding: 30, defaultPadding:10});   
49    });    
50    </script>   
51    <style>   
52      body {}{font-family:arial;font-style:bold}   
53      a {}{color:#666; text-decoration:none} 
54        #menu {}{list-style:none;width:160px;padding-left:10px;}   
55        #menu li {}{margin:0;padding:5px;cursor:hand;cursor:pointer}   
56    </style>   
57</head>      
58<body>   
59
60<ul id="menu">   
61    <li>Home</li>   
62    <li>Posts</li>   
63    <li>About</li>   
64    <li>Contact</li>   
65</ul>   
66
67</body>   
68</html>   

我希望這個教程能讓你更容易的理解jQuery插件

• jquery
• 插件