快捷導(dǎo)航

跟我一起學(xué)寫jQuery插件開(kāi)發(fā)方法（附完整實(shí)例及下載）

更新時(shí)間：2010年04月01日 23:37:51 作者：

jQuery如此流行，各式各樣的jQuery插件也是滿天飛。你有沒(méi)有想過(guò)把自己的一些常用的JS功能也寫成jQuery插件呢？如果你的答案是肯定的，那么來(lái)吧！和我一起學(xué)寫jQuery插件吧！

很多公司的前端設(shè)計(jì)開(kāi)發(fā)人員都是女孩子，而這些女孩子很多JavaScript技能都不是很好。而前端開(kāi)發(fā)過(guò)程中，JavaScript技能又是必不可少的。所以，如果前端小MM正在為某個(gè)JavaScript效果發(fā)愁的時(shí)候，你瀟灑的過(guò)去，然后對(duì)她說(shuō)：“嗨，美女，用這個(gè)吧。這是我寫的一個(gè)jQuery插件?！蔽蚁牖旧夏愕娜松笫戮湍芎芸旖鉀Q。
先想好做個(gè)什么功能
這是第一步，也是很重要的一步，鑒于咱們都是剛學(xué)習(xí)寫jQuery插件，所以，這個(gè)功能一定要簡(jiǎn)單一些。不要想一口就吃個(gè)胖子，咱也吃不了。咱還是撿個(gè)瘦的下手吧。但是，這個(gè)功能也不能太無(wú)聊，如果無(wú)聊到幾乎沒(méi)用處，就算做好了也是扔到馬桶里，不會(huì)持續(xù)更新，也便不會(huì)持續(xù)進(jìn)步了。
我最終選擇的是：美化表格，讓表格的奇偶行顏色不同，然后鼠標(biāo)移到某行上，某行可以高亮顯示。功能簡(jiǎn)單又實(shí)用，不錯(cuò)，不錯(cuò)。呵呵～～
不急著寫，先想想實(shí)現(xiàn)原理
還不急，先想想實(shí)現(xiàn)原理。必要的時(shí)候，先寫出簡(jiǎn)單的實(shí)現(xiàn)的原型。
我的這個(gè)美化表格的例子，實(shí)現(xiàn)原理倒是簡(jiǎn)單，無(wú)非就是找到表格的奇偶行，然后添加不同的class，活動(dòng)行高亮顯示也很簡(jiǎn)單，只要判斷mouseover事件，然后添加一個(gè)class，mouseout的時(shí)候，再去掉這個(gè)class即可。
一個(gè)通用的框架
在動(dòng)手寫自己的jQuery插件之前，自然是先研究一下別人寫的插件了。其實(shí)寫jQuery也基本有一個(gè)通用的框架。行，那咱也把這框架照搬過(guò)來(lái)吧。

復(fù)制代碼代碼如下:

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

有了這個(gè)，咱就可以往里面套東西了。
名號(hào)、參數(shù)和屬性
好不容易開(kāi)始闖蕩江湖了，一定要有一個(gè)響亮的名號(hào)才行，這樣走在江湖上，才能夠?qū)?，夠威風(fēng)。不信，你聽(tīng)聽(tīng)人家“中國(guó)牙防組”！所以，咱這里一定要起個(gè)響亮的名號(hào)，一定要簡(jiǎn)單、明了、夠權(quán)威。所以，決定了，就叫做“tableUI”了！
參數(shù)和屬性也很簡(jiǎn)單，無(wú)非就是三個(gè)class的名稱。就叫做：evenRowClass、oddRowClass和activeRowClass吧。
所以，上面的框架，咱就把上半身給填上了。

復(fù)制代碼代碼如下:

 
(function($){ 
$.fn.tableUI = function(options){ 
var defaults = { 
evenRowClass:"evenRow", 
oddRowClass:"oddRow", 
activeRowClass:"activeRow" 
} 
var options = $.extend(defaults, options); 
this.each(function(){ 
//實(shí)現(xiàn)代碼 
}); 
}; 
})(jQuery); 

這里重點(diǎn)說(shuō)一下這一句：

復(fù)制代碼代碼如下:

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

看上去很屌的一句，其實(shí)就是合并多個(gè)對(duì)象為一個(gè)。這里就是，如果你在調(diào)用的時(shí)候?qū)懥诵碌膮?shù)，就用你新的參數(shù)，如果沒(méi)有寫，就用默認(rèn)的參數(shù)。想進(jìn)一步了解的朋友，可以參考jquery的官方文檔： http://api.jquery.com/jQuery.extend/

開(kāi)始下半身吧
ok，上半身填補(bǔ)完了，咱就可以填補(bǔ)下半身吧。無(wú)非就是找到基數(shù)行和偶數(shù)行（感謝jQuery提供了類似tr:even這種寫法，使其及其簡(jiǎn)單），然后添加上相應(yīng)的class。然后再給所有的tr，綁定mouseover和mouseout事件即可。下半身代碼如下：

復(fù)制代碼代碼如下:

(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); 
//添加活動(dòng)行顏色 
$(thisTable).find("tr").bind("mouseover",function(){ 
$(this).addClass(options.activeRowClass); 
}); 
$(thisTable).find("tr").bind("mouseout",function(){ 
$(this).removeClass(options.activeRowClass); 
}); 
}); 
}; 
})(jQuery); 

最重要的一步！
也許有些朋友覺(jué)得這樣就算是完成了。但是切切相反，我們還有最重要的一步?jīng)]有完成，那就是一定要在插件上方，寫上插件的名稱、版本號(hào)、完成日期、作者，作者的聯(lián)系方式、出生日期、三圍……等等。因?yàn)橹挥羞@樣才能顯的這個(gè)插件夠?qū)I(yè)。

復(fù)制代碼代碼如下:

 
/* 
* tableUI 0.1 
* Copyright (c) 2009 JustinYoung http://justinyoung.cnblogs.com/ 
* Date: 2010-03-30 
* 使用tableUI可以方便地將表格提示使用體驗(yàn)。先提供的功能有奇偶行顏色交替，鼠標(biāo)移上高亮顯示 
*/ 
(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); 
//添加活動(dòng)行顏色 
$(thisTable).find("tr").bind("mouseover",function(){ 
$(this).addClass(options.activeRowClass); 
}); 
$(thisTable).find("tr").bind("mouseout",function(){ 
$(this).removeClass(options.activeRowClass); 
}); 
}); 
}; 
})(jQuery); 