JavaScript浏览器选项卡效果

210 阅读 0 评论 139 点赞

我是靠谱客的博主凶狠大雁，最近开发中收集的这篇文章主要介绍JavaScript浏览器选项卡效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

有图如下:

代码如下:

复制代码代码如下:

 
/* 
head html : <span></span> 
body 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(); 
}, 
}; 
/* 
head html : <div><span></span><span></span>...</div> 
body 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(); 
} 
} 
}); 
}, 
}; 