jQuery外掛--表格隔行變色

         

外掛分倆種：

·類級別元件開發：

          ---即給JQuery名稱空間下新增新的全域性函式，也稱靜態方法。形式如下： 

jQuery.myPlugin = function (){           //do something};

例如：$.ajax(options); $.type();

 

·物件級別元件開發

           ---掛在JQuery原型下的方法，透過選擇器獲取的JQuery物件例項能共享該方法，稱為動態方法。形式如下：

//$.fn == $.prototype$.fn.myPlugin = function () {          //do somthing};

例如：.addClass(); .attr();

 

同時，外掛也要保持JQuery鏈式呼叫的特性，鏈式呼叫的形式如下：

$.fn.myPlugin = function (){

         return this.each(function (){   //return實現鏈式呼叫

                         //do something 

         });

};

----------------------------------以上就是外掛機制---------------------------------

 下面實現一個簡單的表格隔行變色外掛：

 //為了更好的相容性，前面有個分號(function($){    $.fn.tableUI = function(options){        var defaults = {            evenRowClass:"evenRow",            oddRowClass:"oddRow",            activeRowClass:"activeRow",            clickRowClass:"clickRow"        }        var options = $.extend(defaults, options);//$.extend(option...)返回一個物件.        //為了實現鏈式呼叫，用return返回物件        return this.each(function(){            //快取this            var thisTable = $(this);            $(thisTable).find("tr:even").addClass(options.evenRowClass);            $(thisTable).find("tr:odd").addClass(options.oddRowClass);            $(thisTable).find("tr").bind("mouseover",function(){                $(this).removeClass(options.clickRowClass).addClass(options.activeRowClass);            });            $(thisTable).find("tr").bind("mouseout",function(){                $(this).removeClass(options.clickRowClass).removeClass(options.activeRowClass);            });            $(thisTable).find("tr").bind("click",function(){                $(this).addClass(options.clickRowClass);            });        });    };})(jQuery);