學習編寫jquery插件—美化表格

當了這麼久的碼農，也用了無數次別人寫的插件，是時候該學習學習自己動手寫插件了。今天先借用別人寫的超簡單、實用的美化表格小插件，來學習下jquery插件的編寫。

寫插件之前先想好插件要實現的功能，這裏寫的美化表格插件就是讓表格的奇偶行顏色不同，然後鼠標移到某行上，某行可以高亮顯示。

接下來想想插件的實現原理，美化表格無非就是找到表格的奇偶行，然後添加不同的class，活動行高亮顯示也很簡單，只要判斷mouseover事件，然後添加一個class，mouseout的時候，再去掉這個class即可。

其實寫jquery插件都有一個通用的框架，看別人寫的插件就會發現，大多套用了這個通用的框架模板。

(function($){
	$.fn.yourName=function(options){
		var defaults={
			//各種屬性、參數
		}
		var options=$.extend(defaults,options);
	        this.each(function(){
		    //插件實現代碼
	        });
	};	
})(jQuery);

有了這個框架，接下來開始寫功能的實現，給美化表格的插件起個名字，就叫jquery.tableUI.js吧,方法名就是tableUI啦。

首先定義參數和屬性，這裏涉及到奇偶行、活動行，所以定義三個class名稱，就叫做：evenRowClass、oddRowClass和activeRowClass。

(function($){
	$.fn.tableUI=function(options){
		var defaults={
			//各種屬性、參數
			evenRowClass:"evenRow",
			oddRowClass:"oddRow",
			activeRowClass:"activeRow"
		}
		var options=$.extend(defaults,options);
	        this.each(function(){
		    //插件實現代碼
	        });
	};	
})(jQuery);

var options = $.extend(defaults, options);

其實就是合併多個對象爲一個，將options對象合併到defaults對象中，再賦值給options變量。這裏就是，如果你在調用的時候寫了新的參數，就用你新的參數，如果沒有寫，就用默認的參數。

需要的屬性參數寫好了，開始寫實現的代碼吧

思路就是找到奇數行和偶數行（感謝jQuery提供了類似tr:even這種寫法，使其及其簡單），然後添加上相應的class。然後再給所有的tr，綁定mouseover和mouseout事件即可。代碼如下：

(function($){
	$.fn.tableUI=function(options){
		var defaults={
			//各種屬性、參數
			evenRowClass:"evenRow",
			oddRowClass:"oddRow",
			activeRowClass:"activeRow"
		}
		var options=$.extend(defaults,options);
	        this.each(function(){        //這裏面的this爲jquery對象，而不是dom對象 
		    //插件實現代碼
		    var thisTable=$(this);
		    //設置奇偶行顏色
		    thisTable.find("tr:even").addClass(options.evenRowClass);
		    thisTable.find("tr:odd").addClass(options.oddRowClass);
		    //設置活動行顏色
		    thisTable.find("tr").bind("mouseover",function(){
			$(this).addClass(options.activeRowClass);
		    });
		    thisTable.find("tr").bind("mouseout",function(){
			$(this).removeClass(options.activeRowClass);
		    });		    
	        });
	};	
})(jQuery);

this.each(function(){}),這裏面的this指jquery對象，而不是dom對象。爲什麼這裏的this是jquery對象而不是dom對象，因爲this永遠指向調用該方法（函數）的那個對象(call，apply方法除外)。這裏面tableUI是通過$(".table_solid") 調用的，所以tableUI方法裏面的this爲jquery對象。
最後在插件上方，寫上插件的名稱、版本號、完成日期、作者等註釋信息，就算大功告成了。

最後給頁面的table調用這個方法：

$(function(){
    $(".table_solid").tableUI();
});