DIY jquery plugin - tabs标签切换实现代码

Why DIY jquery tab
接触jquery 2,3个月了，一直都未动手写过插件。正好最近比较闲，就打算把一直看不顺眼的项目中现有的tab改造一番（现有的tab未能做成一个控件，copy,past的代码太多）。
想着jQuery这么强大的库不可能没有tabs插件吧，赶紧搜了一下，哈，果然！jQuery tabs！心里一阵窃喜，赶紧load下来用用吧。可查看了一下它的用法，才发现不太适用现有的项目耶，我们的tab每一个都对应着一个完整的页面，是用iframe嵌入的。而jQuery tabs似乎并没有支持iframe哦。那就改造一下吧？得从头到尾研究它的代码吧，头疼！还不如自己写一个得了，正好练练手，哈哈。说干就干，由此便诞生了我的第一个jQuery插件。

Code

/* 
* jquery.tab 
* Author: 冬日小草 
* Date: 2010/12/07 
*/ 
jQuery.fn.tab = function(options) { 
var settings = 
{ 
activeTabClass: "tab-selected", 
defaultTabClass: "tab-default", 
tabContainerClass: "tabContainer", 
tabPanelCls: "tabPanel", 
mouseoverTabClass: null, 
hiddenTabClass: 'tab-hide', 
tabPanel: null, 
selectHandler: null, 
iframeIdPrex: 'iframe_' 
}; 

if (options) { 
jQuery.extend(settings, options); 
} 
//#region public events 
$.fn.setActiveTab = function(tabIndex) { 
if (tabIndex) { 
return this.each(function() { 
this.setActiveTab(tabIndex); 
}) 
} 
}; 
$.fn.getFrameByTabId = function(tabId) { 
if (tabId) { 
var iframeId = settings.iframeIdPrex + tabId; 
return frames[iframeId]; 
} 
return null; 
}; 
//#endregion public events 
return this.each(function() { 
var ts = this; 
var $tabContainer = $(ts); 
ts.activeTab = null; 
ts.tabPanelId = null; 
ts.selectedTab = null; 
ts.selectedIndex = 0; 
ts.iframeId = null; 

//#region 'private' methods 
this.setActiveTab = function(tabIndex) { 
if (typeof (tabIndex) != "number") { 
return; 
} 

var selectedTab = $('li:visible', $tabContainer).eq(tabIndex); 
if (selectedTab.length == 0) { 
return; 
} 
//click the active tab 
if (ts.iframeId == settings.iframeIdPrex + selectedTab.attr('id')) { 
return; 
} 
else { 
if (ts.iframeId != null) { 
//$(frames[activeTabId]).hide(); 
$("iframe").hide(); 
} 
} 
$('.' + settings.activeTabClass, $tabContainer).removeClass(settings.activeTabClass); 
ts.activeTab = selectedTab; 
ts.activeTab.addClass(settings.activeTabClass); 
var target = ts.activeTab.attr('target'); 
if (typeof (target) != 'string') { 
return; 
} 
ts.iframeId = settings.iframeIdPrex + selectedTab.attr('id'); 
if ($('#' + ts.iframeId).length == 0) { 
var iframe = $('<iframe></iframe>'); 
iframe.attr('id', ts.iframeId) 
.attr('src', target) 
.css({ width: '100%', height: '100%' }); 
iframe.appendTo(settings.tabPanel); 
} 
else { 
$('#' + ts.iframeId).show(); 
} 
}; 
var initialTabs = function() { 
$tabContainer.addClass(settings.tabContainerClass); 
$(settings.tabPanel).addClass(settings.tabPanelCls); 
var stopFloatDiv = $('<div></div>'); 
stopFloatDiv.css({ clear: 'both', height: '0px' }) 
.insertAfter($tabContainer); 
$('li', $tabContainer).each(function(i) { 
var $tab = $(this); 
var $link = $('a', $tab); 
var href = $link.attr('href'); 
$link.attr('href', "#"); 
$tab.attr('target', href) 
.addClass(settings.defaultTabClass) 
.click(function(e) { 
ts.selectedTab = $tab; 
ts.selectedIndex = i; 
if (typeof (settings.selectHandler) == "function") { 
settings.selectHandler(); 
} 
else { 
ts.setActiveTab(i); 
} 
}) 
}); 
}; 
//#endregion 'private' methods 
initialTabs(); 
ts.setActiveTab(0); //set first tab active as default. 
}); 
};

Demo

html code: 
<ul id="tabs"> 
<li id="tabBlog"><a href="blog.htm"><span>博客园</span></a></li> 
<li id="tabHome"><a href="home.htm"><span>首页</span></a></li> 
<li id="tabManagement"><a href="management.htm"><span>管理</span></a></li> 
</ul> 
<div id="tabPanel"> 
</div> 

javascript code: 
$(window).load(function() { 
$('#tabs').tab({ 
tabPanel: '#tabPanel' 
}); 
})

screenshot:


Description
parameter(optional) -- 可自定义tab的样式，触发tab的事件等。默认值如下：

var settings = 
{ 
activeTabClass: "tab-selected", //css for active tab 
defaultTabClass: "tab-default", //css for inactive tabs 
tabContainerClass: "tabContainer", //css for the tab container 
tabPanelCls: "tabPanel", //css for the panel that contains the iframe 
mouseoverTabClass: null, //css for tab when mouse over it 
hiddenTabClass: 'tab-hide', //css for the hidden tab 
tabPanelId: null, //the panel id which is used for include iframe 
selectHandler: null, //event handler when user switch tab 
iframeIdPrex: 'iframe_' //the id prex for iframe, it's useful for getting iframe by tab id. 
};

public methods -- setActiveTab(tabIndex) && getFrameByTabId(tabId)

setAcitveTab: set active tab by tab index. 
$('#tabs').setActiveTab(1); //set the second tab active. 
getFrameByTabId: get frame for a specific tab. 
$('#tabs').getFrameByTabId("tabHome"); //get the frame for home page.

others
1. 此tab用了三个dom元素<li><a><span>, 是因为为了兼容tab文字的任意大小，其背景用了三张图片，我用了li呈现左边的圆角图片，a呈现右边的圆角，而span则平铺中间的背景。其实用两个图片也可以实现，做一个很长的有左圆角的的背景图片和一个右圆角。但不管如何为了有圆角效果添加了这些无意义的元素，总是让人不爽。真是希望CSS3的圆角技术和一个dom元素可设置多张背景图能到很好的支持。
2. 此插件支持用户自定义切换tab事件（selectHandler），以支持特殊需求，如某tab页验证不通过，不让切换等。用法：

$('#tabs').tab({ 
tabPanel: '#tabPanel', 
selectHandler: function() { 
switchTab(); //the function that you defined. 
} 
});

3. tab插件里activeTab，selectedIndex属性等是为了让用户自定义tab切换事件是能得到与tab相关的信息，可根据自己的需要扩展。用法：

$('#tabs').each(function() { 
var $tabs = this; 
var currentTabId = $tabs.activeTab.attr('id'); 
//... 
}