//tab顯示區域類
//TabZone結構為：
//參數說明：
//id:需要動態創建TabPage的區域id
//activeCSS:激活狀態的tab樣式
//inactiveCSS:未激活狀態的tab樣式
//zoneCSS:整個TabZone包含TabPage的樣式
function TabZone(id,activeCSS,inactiveCSS,zoneCSS){
//激活時的標簽樣式類
this.activeCSS = activeCSS;
//未激活時的標簽樣式類
this.inactiveCSS = inactiveCSS;
//最外層顯示區域
this.outerZone = $(id);
this.outerZone.className = zoneCSS;
//動態創建tab及page區域
if(this.outerZone.childElements().length == 0 ||
(this.outerZone.down() && this.outerZone.down().tagName.toLowerCase() != "ul") ||
(this.outerZone.down().next() && this.outerZone.down().next().tagName.toLowerCase() != "div")
){
var frag = document.createDocumentFragment();
var ul = document.createElement("ul");
var div = document.createElement("div");
frag.appendChild(ul);
frag.appendChild(div);
this.outerZone.innerHTML = "";
this.outerZone.appendChild(frag);
}
//內部的tab標簽區域
this.innerTabZone = this.outerZone.down();
//內部的顯示Pages的區域
this.innerPageZone = this.innerTabZone.next();
//保存生存期內所有添加的TabPage對象
this.tabs = new Array();
}
//向TabZone添加Tab
TabZone.prototype.addTab = function(obj){
this.tabs[this.tabs.length] = obj;
//添加事件監聽
var realContext = this;
var focus =this.focus;
//使用Event.observe會使上下文環境發生變化，進而無法直接使用this被指向其他引用
//使用call改變this所指對象
Event.observe(obj.tab, 'click',function(e){focus.call(realContext,obj);});
//為未保護的tab添加關閉事件
if(!obj.protect){
var close = this.close;
Event.observe(obj.tab, 'dblclick',function(e){close.call(realContext,obj);});
}
//添加事件結束
//文檔中添加tab及page
this.innerTabZone.appendChild(obj.tab);
this.innerPageZone.appendChild(obj.page);
this.focus(obj);
}
//關閉所有未保護的TabPage
TabZone.prototype.closeAll = function(){
var tabCount = this.tabs.length;
for(var i=this.tabs.length-1;i>=0;i--){
if(!this.tabs[i].protect){
this.innerTabZone.removeChild(this.tabs[i].tab);
this.innerPageZone.removeChild(this.tabs[i].page);
this.tabs.splice(i,1);
}
}
//關閉未保護的tab后處理焦點
if(tabCount > this.tabs.length && this.tabs.length > 0){
this.focus(this.tabs[0]);
}
}
//隱藏除了指定參數的tab
TabZone.prototype.hideExcept = function(obj){
for(var i=0;i0){
this.focus(this.tabs[i]);
}
else if(i > 0){
this.focus(this.tabs[i-1]);
}
return;
}
}
}
}
//tab頁類
//name：tab標簽名稱
//src：page指向的頁面地址
//protect：bool，指明tab是否可以被保護，被保護的tab不可被關閉
function TabPage(name,src,protect){
this.protect = protect==true?true:false;
//tab
this.tab = document.createElement("li");
this.tab.innerHTML = name==undefined?"untitled":name;
//page區域
this.page = document.createElement("div");
//page實際內容頁面
var iframe = document.createElement("iframe");
iframe.frameBorder = 0;
iframe.src = src==undefined?"":src;
//iframe添加入page區域
this.page.appendChild(iframe);
}