软件开发培训班 >> 编程开发 >> JavaScript


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

　　本文标签：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, its 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);
//...
}