//=================================================================== //建立日期：2005年6月22日 //作者：杜保发@东南融通 //功能概述：tag页控件脚本库,客户端运行时创建、打开、查找、关闭及释放Tab页 //调用方法：在调用文件头引入即可，如下： // // // //=================================================================== //**********************以下TabPane类的代码===========================// //=================================================================== //功能: TabPane，页面板对象（管理TabPage，是TabPage的容器) //的析构函数，初始化TabPane对象、创建TabRow对象。 //输入参数: //el,HTML元素，存放TabPane对象的DIV对象 //elContent,HTML元素，存放TabPages的内容的SPAN对象 //返回值: //=================================================================== function TabPane(el, elContent) { try { if (typeof elContent == "undefined") elContent = document.getElementById("dynamic_iframe"); this.element = el; this.element.tabPane = this; this.elementContent = elContent; this.pages = []; this.selectedIndex = 0; this.element.className = this.classNameTag + " " + this.element.className; this.tabRow = document.createElement("div"); this.tabRow.className = "tab-row"; el.insertBefore(this.tabRow, el.firstChild); } catch(e) { processException(e); } } //=================================================================== //功能: TabPane类属性,默认值为：dynamic-tab-pane-control //=================================================================== TabPane.prototype.classNameTag = "dynamic-tab-pane-control"; //=================================================================== //功能: TabPane类方法，设置指定页为活动页并显示。 //输入参数:n，要显示的页 //返回值: //=================================================================== TabPane.prototype.setSelectedIndex = function (n, url) { if (typeof(url) == 'undefined') url = ""; try { if (this.selectedIndex != n) { if (this.selectedIndex != null && this.pages[ this.selectedIndex ] != null) this.pages[ this.selectedIndex ].hide(); } this.selectedIndex = n; this.pages[ this.selectedIndex ].show(); if (url != "") this.pages[this.selectedIndex].contentFrame.src = url; } catch(e) { processException(e); } } //=================================================================== //功能: TabPane类方法，获取活动页的序号。 //输入参数:无 //返回值: 活动页的序号 //=================================================================== TabPane.prototype.getSelectedIndex = function () { return this.selectedIndex; } //=================================================================== //功能: TabPane类方法，在TabPane容器里增加新的TabPage //页并设置为活动页。 //输入参数:HTML元素，存放TabPage对象的DIV对象 //返回值: 新增加的Tab页对象 //=================================================================== TabPane.prototype.addTabPage = function (oElement) { try { var n = this.pages.length; var tp = this.pages[n] = new TabPage(oElement, this.elementContent, this, n); tp.tabPane = this; this.tabRow.appendChild(tp.tab); this.setSelectedIndex(n); return tp; } catch(e) { processException(e); return null; } } //=================================================================== //功能: TabPane类方法，按Tab页标题查找Tab页对象 //输入参数:要查找的Tab页标题 //返回值: 若找到，则为找到的Tab页对象，否则为null。 //=================================================================== TabPane.prototype.findTabPage = function (title) { var len = this.pages.length; for (var i = 0; i < len; i++) { if (this.pages[i].title == title) { return this.pages[i]; } } return null; } //=================================================================== //功能: TabPane类方法，按Tab页标题打开Tab页， //若已打开，则设为活动页，否则，新建Tab页并设为活动页 //输入参数:title,要查找的Tab页标题,url，活动页的url， //bReload:true 表示重新装载已打开窗口内的文件，默认false //返回值: 无 //=================================================================== TabPane.prototype.openTabPage = function (title, url, bReload) { try { var findObj = this.findTabPage(title); if (typeof(bReload) == "undefined") bReload = false; if (findObj != null) { this.setSelectedIndex(findObj.index, (bReload ? url : "")); } else { var tabPageElement = document.createElement("DIV"); tabPageElement.className = "tab-page"; var tabElement = document.createElement("H2"); tabElement.className = "tab"; tabElement.title = title; tabElement.innerText = title; //title.actLength() > 14 ? title.left(10,true) + "..." : title; tabPageElement.appendChild(tabElement); var tabPage = this.addTabPage(tabPageElement); tabPage.title = title; if (tabPage.contentFrame != null) { tabPage.contentFrame.src = url; } } } catch(e) { processException(e); } } //=================================================================== //功能: TabPane类方法，关闭并释放指定页对象，同时 //设置最后一页为活动页。 //输入参数:n，要关闭的页序号 //返回值: 无 //=================================================================== TabPane.prototype.closeTabPage = function (n) { try { if (n < 0) return; this.pages[n].hide2(); this.pages[n].dispose(); var tmp_pages = new Array(); var l = this.pages.length; var j = 0; for (var i = 0; i < l; i++) { if (i != n) { tmp_pages[j] = this.pages[i]; tmp_pages[j].index = j; j++; } } this.pages = tmp_pages; if (tmp_pages.length == 0) { this.selectedIndex = -1; return; } this.selectedIndex = this.pages.length - 1; this.pages[this.selectedIndex].show(); } catch(e) { processException(e); } } //=================================================================== //功能: TabPane类方法，释放所有的页对象 //输入参数:无 //返回值: 无 //=================================================================== TabPane.prototype.dispose = function () { try { this.element.tabPane = null; this.element = null; this.tabRow = null; for (var i = 0; i < this.pages.length; i++) { this.pages[i].dispose(); this.pages[i] = null; } this.pages = null; } catch(e) { processException(e); } } //**********************以下TabPage类的代码=======================// //=================================================================== //功能: TabPage页对象的析构函数TabPage类受TagPane管理。 //输入参数: //el,HTML元素，存放TabPage对象的DIV对象 //elContent,HTML元素，存放TabPage对象内容的SPAN对象 //tabPane，TabPage的容器对象, //nIndex，TabPane容器里的页对象序号 //返回值: //=================================================================== function TabPage(el, elContent, tabPane, nIndex) { try { this.element = el; this.element.tabPage = this; this.index = nIndex; var cs = el.childNodes; for (var i = 0; i < cs.length; i++) { if (cs[i].nodeType == 1 && cs[i].className == "tab") { this.tab = cs[i]; break; } } var a = document.createElement("A"); this.aElement = a; a.href = "#"; a.onclick = function () { return false; }; while (this.tab.hasChildNodes()) a.appendChild(this.tab.firstChild); this.tab.appendChild(a); if (this.contentFrame != null) { this.tab.appendChild(this.contentFrame); } var contentFrame = document.createElement("IFRAME"); contentFrame.className = "contentFrame"; contentFrame.id = "TAB_IFRAME_" + this.index; this.contentFrame = contentFrame; elContent.insertBefore(contentFrame, null); var oThis = this; this.tab.onclick = function () { oThis.select(); }; this.tab.ondblclick = function () { oThis.close(); }; this.tab.onmouseover = function () { TabPage.tabOver(oThis); }; this.tab.onmouseout = function () { TabPage.tabOut(oThis); }; } catch(e) { processException(e); } } //=================================================================== //功能: TabPage类方法，显示当前Tab页。 //输入参数:无 //返回值: 无 //=================================================================== TabPage.prototype.show = function () { //在显示当前页前，调用页内部的显示函数做显示前的处理动作。 try { eval(this.contentFrame.id + ".beforeTabShow();"); } catch(e) { //alert(this.contentFrame.id); } //处理显示页 try { var el = this.tab; var s = el.className + " selected"; s = s.replace(/ +/g, " "); el.className = s; this.element.style.display = "block"; this.contentFrame.style.display = "block"; } catch (e) { processException(e); } //在显示当前页后，调用页内部的显示函数做显示后的处理动作，如刷新当前页内容 try { eval(this.contentFrame.id + ".afterTabShow();"); } catch(e) { //alert(this.contentFrame.id); } } //=================================================================== //功能: TabPage类方法，隐藏当前Tab页。 //输入参数:无 //返回值: 无 //=================================================================== TabPage.prototype.hide = function () { //在显示隐藏当前页前，调用页内部的隐藏函数做隐藏前的处理动作。 try { eval(this.contentFrame.id + ".beforeTabHide();"); } catch(e) { //alert(this.contentFrame.id); } try { var el = this.tab; var s = el.className; s = s.replace(/ selected/g, ""); el.className = s; this.contentFrame.style.display = "none"; this.element.style.display = "none"; } catch (e) { processException(e); } //在显示隐藏当前页前，调用页内部的隐藏函数做隐藏后的处理动作。 try { eval(this.contentFrame.id + ".afterTabHide();"); } catch(e) { //alert(this.contentFrame.id); } } //=================================================================== //功能: TabPage类方法，激活页对象,参见容器类TabPane的相应方法。 //输入参数:无 //返回值: 无 //=================================================================== TabPage.prototype.select = function () { this.tabPane.setSelectedIndex(this.index); } //=================================================================== //功能: TabPage类方法，关闭页对象，参见容器类TabPane的相应方法。 //输入参数:无 //返回值: 无 //=================================================================== TabPage.prototype.close = function () { this.tabPane.closeTabPage(this.index); } //=================================================================== //功能: TabPage类方法，隐藏页对象。 //输入参数:无 //返回值: 无 //=================================================================== TabPage.prototype.hide2 = function () { //在显示隐藏当前页前，调用页内部的隐藏函数做隐藏前的处理动作。 try { eval(this.contentFrame.id + ".beforeTabHide();"); } catch(e) { //alert(this.contentFrame.id); } this.tab.style.display = "none"; this.element.style.display = "none"; this.contentFrame.style.display = "none"; //在显示隐藏当前页前，调用页内部的隐藏函数做隐藏后的处理动作。 try { eval(this.contentFrame.id + ".afterTabHide();"); } catch(e) { //alert(this.contentFrame.id); } } //=================================================================== //功能: TabPage类方法，释放页对象。 //输入参数:无 //返回值: 无 //=================================================================== TabPage.prototype.dispose = function () { this.aElement.onclick = null; this.aElement = null; this.element.tabPage = null; this.tab.onclick = null; this.tab.ondblclick = null; this.tab.onmouseover = null; this.tab.onmouseout = null; this.tab = null; this.contentFrame = null; this.tabPane = null; this.element = null; } //=================================================================== //功能: TabPage类方法，鼠标移到tab页的标题头时改变样式。 //输入参数:无 //返回值: 无 //=================================================================== TabPage.tabOver = function (tabpage) { var el = tabpage.tab; var s = el.className + " hover"; s = s.replace(/ +/g, " "); el.className = s; } //=================================================================== //功能: TabPage类方法，鼠标移出tab页的标题头时还原样式。 //输入参数:无 //返回值: 无 //=================================================================== TabPage.tabOut = function (tabpage) { var el = tabpage.tab; var s = el.className; s = s.replace(/ hover/g, ""); el.className = s; } //=================================================================== //功能: 初始化所有未出初始化的TabPane及TabPage对象 //输入参数:无 //返回值: 无 //=================================================================== function setupAllTabs() { var all = document.getElementsByTagName("*"); var l = all.length; var tabPaneRe = /tab\-pane/; var tabPageRe = /tab\-page/; var cn, el; var parentTabPane; for (var i = 0; i < l; i++) { el = all[i] cn = el.className; // no className if (cn == "") continue; // uninitiated tab pane if (tabPaneRe.test(cn) && !el.tabPane) new TabPane(el); // unitiated tab page wit a valid tab pane parent else if (tabPageRe.test(cn) && !el.tabPage && tabPaneRe.test(el.parentNode.className)) { el.parentNode.tabPane.addTabPage(el); } } } //=================================================================== //功能: 释放所有TabPane及TabPage对象 //输入参数:无 //返回值: 无 //=================================================================== function disposeAllTabs() { var all = document.getElementsByTagName("*"); var l = all.length; var tabPaneRe = /tab\-pane/; var cn, el; var tabPanes = []; for (var i = 0; i < l; i++) { el = all[i] cn = el.className; // no className if (cn == "") continue; // tab pane if (tabPaneRe.test(cn) && el.tabPane) tabPanes[tabPanes.length] = el.tabPane; } for (var i = tabPanes.length - 1; i >= 0; i--) { tabPanes[i].dispose(); tabPanes[i] = null; } } // initialization hook up // DOM2 if (typeof window.addEventListener != "undefined") window.addEventListener("load", setupAllTabs, false); // IE else if (typeof window.attachEvent != "undefined") { window.attachEvent("onload", setupAllTabs); window.attachEvent("onunload", disposeAllTabs); } else { if (window.onload != null) { var oldOnload = window.onload; window.onload = function (e) { oldOnload(e); setupAllTabs(); }; } else window.onload = setupAllTabs; }