簡單的Jquery 外掛編寫
jQuery如此流行，各式各樣的jQuery外掛也是滿天飛。你有沒有想過把自己的一些常用的JS功能也寫成jQuery外掛呢？如果你的答案是肯定的，那麼來吧！和我一起學寫jQuery外掛吧！
先想好做個什麼功能
這是第一步，也是很重要的一步，鑑於咱們都是剛學習寫jQuery外掛，所以，這個功能一定要簡單一些。不要想一口就吃個胖子，咱也吃不了。咱還是撿個瘦的下手吧。但是，這個功能也不能太無聊，如果無聊到幾乎沒用處，就算做好了也是扔到馬桶裡，不會持續更新，也便不會持續進步了。
我最終選擇的是：美化表格，讓表格的奇偶行顏色不同，然後滑鼠移到某行上，某行可以高亮顯示。功能簡單又實用，不錯，不錯。呵呵～～
不急著寫，先想想實現原理
還不急，先想想實現原理。必要的時候，先寫出簡單的實現的原型。
我的這個美化表格的例子，實現原理倒是簡單，無非就是找到表格的奇偶行，然後新增不同的class，活動行高亮顯示也很簡單，只要判斷mouseover事件，然後新增一個class，mouseout的時候，再去掉這個class即可。
一個通用的框架
在動手寫自己的jQuery外掛之前，自然是先研究一下別人寫的外掛了。其實寫jQuery也基本有一個通用的框架。行，那咱也把這框架照搬過來吧。
(function($){
$.fn.yourName = function(options){
//各種屬性、引數
}
var options = $.extend(defaults, options);
this.each(function(){
//外掛實現程式碼
});
};
})(jQuery);
有了這個，咱就可以往裡面套東西了。
名號、引數和屬性
好不容易開始闖蕩江湖了，一定要有一個響亮的名號才行，這樣走在江湖上，才能夠屌，夠威風。不信，你聽聽人家“中國牙防組”！所以，咱這裡一定要起個響亮的名號，一定要簡單、明瞭、夠權威。所以，決定了，就叫做“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);
看上去很屌的一句，其實就是合併多個物件為一個。這裡就是，如果你在呼叫的時候寫了新的引數，就用你新的引數，如果沒有寫，就用預設的引數。想進一步瞭解的朋友，可以參考jquery的官方文件：http://api.jquery.com/jQuery.extend/
開始下半身吧
ok，上半身填補完了，咱就可以填補下半身吧。無非就是找到基數行和偶數行（感謝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(){
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);
最重要的一步！
也許有些朋友覺得這樣就算是完成了。但是切切相反，我們還有最重要的一步沒有完成，那就是一定要在外掛上方，寫上外掛的名稱、版本號、完成日期、作者，作者的聯絡方式、出生日期、三圍……等等。因為只有這樣才能顯的這個外掛夠專業。
/*
* tableUI 0.1
* Copyright (c) 2009JustinYoung http://justinyoung.cnblogs.com/
* Date: 2010-03-30
* 使用tableUI可以方便地將表格提示使用體驗。先提供的功能有奇偶行顏色交替，滑鼠移上高亮顯示
*/
(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
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);