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