如何撰寫jQuery Plugin

http://www.queness.com/post/112/a-really-simple-jquery-plugin-tutorial

經過我自己的消化, 撰寫jQuery plugin 的懶人包敘述如下:

1. 首先有點廢話的是該頁面請先嵌入 jQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

2. 再來是重頭戲, 也就是jQuery plugin 本體的撰寫:

      (function($){   // 封裝起來, 以免和外界js 變數衝突到
                $.fn.extend({
                    //plugin name - animatemenu    // 定義 plugin 名稱
                    animateMenu: function(options) {
           
                        //Settings list and the default values   // 設定plugin input parameters 的預設值
                        var defaults = {
                            animatePadding: 60,
                            defaultPadding: 10,
                            evenColor: '#ccc',
                            oddColor: '#eee'
                        };
                       
                        // 把預設值和實際輸入值比對, 如果有傳入值的則以傳入值為主
                        // 如此便得到輸入值 options (在此匿名函式中存在之變數)
                        var options = $.extend(defaults, options);
                        // 執行此 plugin 的實際動作, 對其作用對象的陣列迭代(iterate over), 例如說對$(".class_name") 呼叫此plugin, 則 this.each 就代表所有帶有 class_name 為 class 屬性的DOM element
                        return this.each(function() {
                            var o =options;
                           
                            //Assign current element to variable, in this case is UL element
                            var obj = $(this);         // obj 代表迭代到的單一物件
                           
                            //Get all LI in the UL
                            // items 為 obj 物件下的所有 "li" element
                            var items = $("li", obj);
                             
                            //Change the color according to odd and even rows
                            $("li:even", obj).css('background-color', o.evenColor);          
                            $("li:odd", obj).css('background-color', o.oddColor);                  
                            items.css({paddingLeft: o.defaultPadding});
                            //Attach mouseover and mouseout event to the LI
                            items.mouseover(function() {
                                $(this).animate({paddingLeft: o.animatePadding}, 300);
                               
                            }).mouseout(function() {
                                $(this).animate({paddingLeft: o.defaultPadding}, 300);
                            });
                           
                        });
                    }
                });
            })(jQuery);


3. 執行邏輯的部分寫完了, 在html 部分補上執行對象

       <ul id="menu">
            <li>Home</li>
            <li>Posts</li>
            <li>About</li>
            <li>Contact</li>
        </ul>


4. 最後在這個對象上執行我們剛剛寫好的jQuery plugin, 利用 jQuery code 呼叫


            $(document).ready(function() {
                $('#menu').animateMenu({animatePadding: 60, defaultPadding:20});
                // 初始化時傳入一些參數
            });