html 仿浏览器选项卡,JavaScript浏览器选项卡效果

有图如下:

代码如下:

/*

head html :

body html :

*/

var Tab = function(id,title,url,isClose){

this.id = id;

this.title = title;

this.url = url;

this.head = jQuery('' + this.title +'');

this.body = jQuery('').hide();

isClose && (this.close = jQuery('×'),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 :

...

body html :

...

*/

var TabView = function(container){

this.container = container;

this.head = jQuery('

this.body = jQuery('

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

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();

}

}

});

},

};