jQuery插件 tabBox實現(xiàn)代碼

更新時間：2010年02月09日 13:45:50 作者：

最近對js以及jq產(chǎn)生了濃厚的興趣，看到jq有很多很好用的插件，功能各異，包括webUI,jqGrid等等。心里萌發(fā)了制作屬于自己的jq插件的想法。

查了一下jq的官方插件編寫文檔（http://docs.jquery.com/Plugins/Authoring）以及文檔中推薦的Mike Alsup寫的一篇A Plugin Development Pattern。英語不是很好，但還是努力看下來（既學習到知識又能練習英語，何樂不為），照貓畫虎的寫了一個處女作——tabBox。

　　顧名思義，這個插件就是方便的產(chǎn)生具有tab選項卡功能“盒子”的。看圖一下就明白

這樣功能在網(wǎng)頁上是非常腸炎寧個的，不論前臺后臺。

　　在這，我首先提供了3個參數(shù)用于自定義插件，

復制代碼代碼如下:

 
$.fn.tabBox.defaults = { 
width : 260, 
height : 200, 
basePath : "tabBox/" 
}; 

width和height定義“盒子”的寬度和高度，basePath用于定義使用插件的頁面對插件文件夾的相對路徑。這個選項的出現(xiàn)時不得已而為之，因為選項卡的樣式中用到了圖片，而必須要有一個基準路徑才能正確找到圖片的路徑。這也是參照了一個叫jqtransform（http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/）的插件的做法，他也有個參數(shù)用于指定圖片文件夾所在的位置。當然還有一種做法，就是想WebUI（http://www.jqueryui.com/）一樣，樣式寫到css文件里，這樣圖片的引用就是先對與css文件的路徑了，而這兩個都是插件的組成部分，相對路勁是不變的。所以不用提供這個路徑了。只是由于這個插件用到的樣式比較少，所以沒有采用這個方法。

　　插件的原理很簡單，核心的函數(shù)就是一個render（），用于渲染出tab的樣式：

復制代碼代碼如下:

$.fn.tabBox.render = function() { 
$(".tabBox").css({ 
width : $.fn.tabBox.defaults.width+"px", 
height : $.fn.tabBox.defaults.height+"px", 
position : "relative", 
border : "1px #ccc solid", 
background : "url("+$.fn.tabBox.defaults.basePath+"tabHead.gif) top left repeat-x" 
}); 
$(".tabBox h2").each(function(i){ 
$(this).css({ 
width : "80px", 
height : "30px", 
position : "absolute", 
"border-top" : "none", 
cursor : "pointer", 
left : 10+(i*80), 
background : "url("+$.fn.tabBox.defaults.basePath+"tabNormal.gif) top right no-repeat", 
"text-align" : "center", 
"font-size" : "12px", 
"font-weight" : "normal", 
color : "#06c", 
"line-height" : "22px" 
}); 
}); 
$(".tabBox div").each(function(){ 
$(this).css({ 
width : $.fn.tabBox.defaults.width+"px", 
height : ($.fn.tabBox.defaults.height-30)+"px", 
display : "none", 
position : "absolute", 
top : "30px" 
}); 
}); 
$(".tabBox h2.curTab").css({ 
background : "url("+$.fn.tabBox.defaults.basePath+"tabCurTab.gif) top center no-repeat", 
"font-weight" : "bolder" 
}); 
$(".tabBox h2.curTab + div").css({ 
display : "block" 
}); 
}; 

可以看到這個函數(shù)全都是設置樣式的代碼，（也讓我體驗了一下用jq設置css的快感，依然記得e.style.backgroud的時代~），這個函數(shù)保證了顯示當前被激活的標簽和對應的信息。另外，通過捕捉tab選項卡的click事件來改變當前的激活標簽，再渲染一次就可以了。

復制代碼代碼如下:

$(".tabBox h2").click(function(){ 
$(".tabBox h2").removeClass("curTab"); 
$(this).addClass("curTab"); 
$.fn.tabBox.render(); 
}); 

寫完之后的一點思考：

1、對插件自定義選項的做法看不太懂

復制代碼代碼如下:

// build main options before element iteration 
var opts = $.extend({}, $.fn.tabBox.defaults, options); 
// iterate and reformat each matched element 
return this.each(function() { 
$this = $(this); 
// build element specific options 
var o = $.meta ? $.extend({}, opts, $this.data()) : opts; 

這差不多是從Mike Alsup的文章中照搬過來的。照他的說法，好像是可以自定義整個插件的選項，還可以定義某一個特定元素的選項，可我試了一下，似乎不可以~。難道是我沒看懂他說的？

2、目前tab是捕捉click事件的，我想加強一下，可以自定義是捕捉click還是mouseover，是的，可以寫兩個事件處理函數(shù)。但怎么樣來通過配置決定調(diào)用哪個處理程序呢？
打包下載