JavaScript ブラウザ タブの効果_JavaScript スキル

有图如下:

代码如下:

复制代 代码如下:

/*
head html :
本文 html :
*/
var Tab = function(id,title,url,isClose){
this.id = id;
this.title = タイトル;
this.url = URL;
this.head = jQuery('' this.title '');
this.body = jQuery('' ）。隠れる（）;
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 :

...

本文 HTML :

...

*/
var TabView = function(container){
this.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(タブ);
(self.tabs.length==0) && (tab.getFocus(),self.focusTab=tab);
self.tabs.push(タブ);
self.head.append(tab.head);
self.body.append(tab.body);
self.tabId ;
},
remove_ref : function(tab){
var self = this;
for(var i=0;iif(tab.id===self.tabs[i].id){
tab.destory() ;
self.tabs.splice(i,1);
私を返します;
}
}
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. lossFocus();
self.focusTab = タブ
}
};
tab.close && tab.close.bind("click",function(){
tab.destory();
var i = self.remove_ref(tab);
if(tab. id==self.focusTab.id){//如果关闭は現在のタブ
if(self.tabs.length==0){//如果全てtab都已关闭
self.destory() ;
}else{
var nextIndex = self.tabs.length==i ? i-1 : i;
self.focusTab = self.focusTab.getFocus ();
}
}
});
}、
};