|
|
顧名思義，這個插件就是方便的產生具有tab選項卡功能“盒子”的。看圖一下就明白
這樣功能在網頁上是非常腸炎寧個的，不論前臺后臺。
在這，我首先提供了3個參數用于自定義插件，
復制代碼 代碼如下:
$.fn.tabBox.defaults = {
width : 260,
height : 200,
basePath : "tabBox/"
};
width和height定義“盒子”的寬度和高度，basePath用于定義使用插件的頁面對插件文件夾的相對路徑。這個選項的出現時不得已而為之，因為選項卡的樣式中用到了圖片，而必須要有一個基準路徑才能正確找到圖片的路徑。這也是參照了一個叫jqtransform（http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/）的插件的做法，他也有個參數用于指定圖片文件夾所在的位置。當然還有一種做法，就是想WebUI（http://www.jqueryui.com/）一樣，樣式寫到css文件里，這樣圖片的引用就是先對與css文件的路徑了，而這兩個都是插件的組成部分，相對路勁是不變的。所以不用提供這個路徑了。只是由于這個插件用到的樣式比較少，所以沒有采用這個方法。
插件的原理很簡單，核心的函數就是一個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"
});
};
可以看到這個函數全都是設置樣式的代碼，（也讓我體驗了一下用jq設置css的快感，依然記得e.style.backgroud的時代~），這個函數保證了顯示當前被激活的標簽和對應的信息。另外，通過捕捉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，是的，可以寫兩個事件處理函數。但怎么樣來通過配置決定調用哪個處理程序呢？
打包下載
JavaScript技術：jQuery插件 tabBox實現代碼，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
