本文介绍如何使用JavaScript结合jQuery库实现一个动态的浏览器选项卡组件。通过Tab类管理单个标签页，TabView类管理容器内的多个标签页，支持添加、切换、关闭及销毁功能。
JavaScript实现浏览器选项卡效果
效果如图所示：
具体代码实现如下：
具体代码实现如下：
/*
头部HTML结构示例：<span></span>
主体HTML结构示例：<iframe></iframe>
*/
var Tab = function(id,title,url,isClose){
this.id = id;
this.title = title;
this.url = url;
this.head = jQuery('<span class="tab-head">' + this.title +'</span>');
this.body = jQuery('<iframe name="ifm' + this.id +'" src="' + this.url +'" frameborder=0 class="tab-body"></iframe>').hide();
isClose && (this.close = jQuery('<span class="tab-head-closeBtn">×</span>'),this.closeBtn());
};
Tab.prototype = {
closeBtn : function(){
var self = this;
self.close.bind("mouseover",function(){
jQuery(this).addClass("tab-closeBtn-hover");
});
self.close.bind("mouseout",function(){
jQuery(this).removeClass("tab-closeBtn-hover");
});
self.head.append(self.close);
},
getFocus : function(){
this.head.addClass("tab-head-active");
this.body.show();
},
loseFocus : function(){
this.head.removeClass("tab-head-active");
this.body.hide();
},
destory : function(){
this.head.remove();
this.body.remove();
},
};
/*
头部HTML结构示例：<div><span></span><span></span>...</div>
主体HTML结构示例：<div><iframe></iframe><iframe></iframe>...</div>
*/
var TabView = function(container){
this.container = container;
this.head = jQuery('<div class="tabView-head"></div>');
this.body = jQuery('<div class="tabView-body"></div>');
this.tabs = [];
this.tabId = 0;
this.focusTab = null;
this.init();
};
TabView.prototype = {
init : function(){
this.container.append(this.head).append(this.body);
},
add : function(title,url,isClose){
var self = this;
var tab = new Tab(self.tabId,title,url,isClose);
self._tabEvents(tab);
(self.tabs.length==0) && (tab.getFocus(),self.focusTab=tab);
self.tabs.push(tab);
self.head.append(tab.head);
self.body.append(tab.body);
self.tabId++;
},
remove_ref : function(tab){
var self = this;
for(var i=0;i<self.tabs.length;i++){
if(tab.id===self.tabs[i].id){
tab.destory();
self.tabs.splice(i,1);
return i;
}
}
return -1;
},
destory : function(){
this.head.remove();
this.body.remove();
},
_tabEvents : function(tab){
var self = this;
tab.head.bind("click",function(){
if(self.focusTab.id != tab.id){
tab.getFocus();
self.focusTab.loseFocus();
self.focusTab = tab;
}
});
tab.close && tab.close.bind("click",function(){
tab.destory();
var i = self.remove_ref(tab);
if(tab.id==self.focusTab.id){//如果关闭的是当前的tab
if(self.tabs.length==0){//如果所有tab都已关闭
self.destory();
}else{
var nextIndex = self.tabs.length==i ? i-1 : i;
self.focusTab = self.tabs[nextIndex];
self.focusTab.getFocus();
}
}
});
},
};