/* 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(); } } }); }, };