zhky/web/js/TabControl.js

// 创建新的DIV图层
document.write('<DIV id="PendingMessage" class="Load">&nbsp;</DIV>');
function onreadystatechange() {
	if (document.readyState == "complete") {
		HiddenLoading();
	}
}

// 显示上面创建的DIV图层
function ShowLoading() {
	$('PendingMessage').style.display = "block";
}

// 隐藏上面创建的DIV图层
function HiddenLoading() {
	$('PendingMessage').style.display = "none";
}

// 图片所在的路径
var _stylePath = null
// 当前框架的ID
var _curentFrame = null;
// 当前框架的地址
var _curentUrl = null;
// 是否显示关闭按钮
var _isShowCloseBtn = null;

/*-------------------------------------------------------------------------------
 功能：类似winForm的基于javascript的TabControl效果
 参数：str:消息体
 调用方法
 var myTab = new HTabControl(_skinId,true);
 document.write(myTab.init());

 不刷新
 top.myTab.Cts('标题','default1.aspx')
 刷新
 top.myTab.Cts('标题','default1.aspx',true)
 -------------------------------------------------------------------------------*/

function HTabControl(tabSkinId, isShowCloseBtn) {
	//this.tabSkinId = tabSkinId;
	_isShowCloseBtn = isShowCloseBtn;
	// 获取tabID对应的tab目录
	_stylePath = _path + "Skin/Tab" + tabSkinId + "/";

	this.init = function() {
		// 读取tabID对应的tab.css
		loadStyle(this.tabSkinId, "tab.css");
		// 设置新的DIV图层
		return "<div id='tabContextMenu' class='ContextMenu' onclick='HiddenDiv(this.id)'>"
				+ "<table border='0' cellpadding='0' cellspacing='0'>"
				+ "<tr><td class='rightMenuItem1' onclick='window.open(_curentUrl)'>新开</td></tr>"
				+ "<tr><td class='rightMenuItem3' onclick='fullOpen(_curentUrl)'>全屏打开</td></tr>"
				+ "<tr><td class='rightMenuItem2' onclick=GetIframe('F_'+_curentFrame).document.location.reload();>刷新</td></tr> "
				+ "</table>"
				+ "</div>"
				+ "<table width='100%' height='100%' border='0' cellspacing='0' cellpadding='0'>"
				+ "<tr>"
				+ "<td style='height:21px' valign='bottom'>"
				+ "<table height='100%' id='tabFrameTitle' border='0' cellspacing='0' cellpadding='0'>"
				+ "<tr>"
				+ "<td valign='bottom'></td>"
				+ "</tr>"
				+ "</table>"
				+ "</td>"
				+ "</tr>"
				+ "<tr>"
				+ "<td class='tabpage' valign='top' id='tdFramePane'></td>"
				+ "</tr>" + "</table>";
	}

	//如果不存在页面就创建，如果存在就聚焦
	this.Cts = function(title, url, isRef) {
		var objTitle = $("tabFrameTitle");
		var objIframe = $("tdFramePane");

		//如果没有该页建立该页 
		if (!$(title)) {
			ShowLoading();
			CreateTitle(objTitle, title);
			if (isRef == true) {
				CreateIframe(objIframe, title, 'auto');
			} else {
				CreateIframe(objIframe, title, 'auto', url);
			}

			if (objTitle.offsetHeight > 13) {
				alert("您打开了太多的窗口，可能导致页面局部变形。建议关闭一部分窗口");
			}
		}

		//聚焦到该页
		FoucsPage(title, url, isRef);
		CollectGarbage(); //清理浏览器内存 
		_curentUrl = url;
		HiddenDiv('tabContextMenu');
	}
}

// 读取皮肤的id和样式表css的名称
function loadStyle(skinId, cssName) {
	var head = document.getElementsByTagName('head').item(0);
	css = document.createElement('link');
	css.href = _stylePath + cssName;
	css.rel = 'stylesheet';
	css.type = 'text/css';
	css.id = 'loadCss';
	head.appendChild(css);
}

//------------------------------主框架的TabControl效果-------------------------------

// 添加标题
function CreateTitle(obj, title) {

	// 建立一个一行三列的表格用于tab的标题头
	var titleTable = document.createElement("table");
	titleTable.setAttribute("border", "0");
	titleTable.setAttribute("cellPadding", "0");
	titleTable.setAttribute("cellSpacing", "0");

	var titleBody = document.createElement("tbody");

	var titleRow = document.createElement("tr");

	// 建立第一列
	var tdLeft = document.createElement("td");
	tdLeft.className = "tabTitleFoucs_l";

	// 建立第二列
	// 作为标题显示
	var tdMid = document.createElement("td");
	tdMid.innerHTML = title;
	tdMid.className = "tabTitleFoucs_m";
	tdMid.title = "双击刷新该页";
	tdMid.onselectstart = function() {
		return false
	};
	tdMid.oncontextmenu = function() {
		e = window.event || e;
		e = e.srcElement || e.target;
		if ("It_" + _curentFrame != e.parentElement.parentElement.parentElement.id)
			return false;
		obj = $("tabContextMenu");
		with (obj) {
			style.pixelLeft = event.x - 3;
			style.pixelTop = event.y - 3;
			style.visibility = "visible";
		}
		return false;
	}

	// 建立第三列
	// 作为关闭按纽的容器
	var tdClose = document.createElement("td");
	tdClose.className = "tabTitleFoucs_m";
	tdClose.style.width = "11px";

	// 建立关闭按纽
	if (_isShowCloseBtn) {
		CreateCloseBtn(tdClose, title);
	}

	// 建立第四列  
	var tdRight = document.createElement("td");
	tdRight.className = "tabTitleFoucs_r";

	// 把列加到行
	titleRow.appendChild(tdLeft);
	titleRow.appendChild(tdMid);
	titleRow.appendChild(tdClose);
	titleRow.appendChild(tdRight);

	// 把行加到tbody
	titleBody.appendChild(titleRow);

	// 把tbody加到表格
	titleTable.appendChild(titleBody);
	titleTable.id = "It_" + title;
	titleTable.onclick = function() {
		FoucsPage(title);

	};
	titleTable.ondblclick = function() {
		GetIframe("F_" + _curentFrame).document.location.reload();
	}

	// 在主表格上建立一个列
	var mainTd = document.createElement("td");
	mainTd.id = title;
	mainTd.setAttribute("height", "21");
	mainTd.appendChild(titleTable);

	// 把列加到主表格
	obj.rows[0].appendChild(mainTd);

}

// 创建新的Iframe
function CreateIframe(obj, title, canScoll, url) {
	var iFrame = document.createElement("iframe");
	iFrame.id = "F_" + title;
	iFrame.name = "F_" + title;
	if (url != null)
		iFrame.src = url;
	iFrame.frameBorder = "0";
	iFrame.scrolling = canScoll;
	iFrame.className = "Frame";
	iFrame.style.width = "100%";
	iFrame.style.height = "100%";
	iFrame.onreadystatechange = function() {
		if (iFrame.document.readyState == "complete") {
			HiddenLoading();
		}
	}
	obj.appendChild(iFrame);
	GetIframe("F_" + title).window.document.onclick = function() {
		HiddenDiv('tabContextMenu');
	}
	//    GetIframe("F_"+title).window.document.onreadystatechange = function()
	//    {
	//        if(GetIframe("F_"+title).window.document.readyState == "complete")
	//        {
	//            HiddenLoading();
	//        }
	//    }
}

// 获取Iframe
function GetIframe(id) {
	return document.frames[id];
}

// 创建关闭按纽
function CreateCloseBtn(parent, id) {
	var closeBtn = new Image();
	closeBtn.id = "btn" + id;
	closeBtn.src = _stylePath + "tab_close.jpg";
	closeBtn.style.cursor = "pointer";
	closeBtn.onclick = function() {
		if (FindOtherFrameId(id) != null) {
			FoucsPage(FindOtherFrameId(id));
			CloseTitle(id);
			CloseIframe("F_" + id);
			HiddenLoading();
		} else {
			alert("必须保留一个标签");
		}
	}
	parent.appendChild(closeBtn);
}

function CloseCurPage() {
	$("btn" + _curentFrame).click();
	CollectGarbage();
}

// 找“相邻”标题所对应的框架的Id
function FindOtherFrameId(id) {
	var lastIframeId = null;
	var objTitle = $("tabFrameTitle");
	var cellCount = objTitle.rows[0].cells.length;
	var currentCellIndex = 0;
	for (var i = 0; i < cellCount; ++i) {
		if (objTitle.rows[0].cells[i].id == id) {
			currentCellIndex = i;
		}
	}
	if (cellCount == 2) {
		return null;
	}
	if (currentCellIndex == 1 && currentCellIndex + 1 <= cellCount) {
		lastIframeId = objTitle.rows[0].cells[currentCellIndex + 1].id;
	} else {
		lastIframeId = objTitle.rows[0].cells[currentCellIndex - 1].id;
	}
	if (lastIframeId == "")
		lastIframeId = null;
	return lastIframeId;
}

// 关闭标题
function CloseTitle(id) {
	if (id != null) {
		var objTitle = $("tabFrameTitle");
		for (var i = 0; i < objTitle.rows[0].cells.length; ++i) {
			if (objTitle.rows[0].cells[i].id == id) {
				if (GetBrowser() == "IE") {
					objTitle.rows[0].cells[i].removeNode(true);
				} else {
					node = objTitle.rows[0].cells[i];
					node.parentNode.removeChild(node);
				}
			}
		}
	}
}

// 关闭框架
function CloseIframe(id) {
	if (GetBrowser() == "IE") {
		var obj = $(id);
		obj.removeNode(true)
	} else {
		node = $(id);
		node.parentNode.removeChild(node);
	}
}

// 聚焦到对应的标题
function FoucsPage(id, url, isRef) {
	if (id == null) {
		_curentFrame = null;
		return;
	}
	if (_curentFrame == id)
		return;
	_curentFrame = id;
	ShowTitle(id);
	ShowIframe(id, url, isRef);
}

// 显示标题及相关样式
function ShowTitle(id) {
	var objTitle = $("tabFrameTitle");
	for (var i = 0; i < objTitle.rows[0].cells.length; ++i) {
		curId = objTitle.rows[0].cells[i].id;
		if (curId != "") {
			$("It_" + curId).rows[0].cells[0].className = "tabTitleUnFoucs_l";
			$("It_" + curId).rows[0].cells[1].className = "tabTitleUnFoucs_m";
			$("It_" + curId).rows[0].cells[2].className = "tabTitleUnFoucs_m";
			$("It_" + curId).rows[0].cells[3].className = "tabTitleUnFoucs_r";
		}
	}
	$("It_" + id).rows[0].cells[0].className = "tabTitleFoucs_l";
	$("It_" + id).rows[0].cells[1].className = "tabTitleFoucs_m";
	$("It_" + id).rows[0].cells[2].className = "tabTitleFoucs_m";
	$("It_" + id).rows[0].cells[3].className = "tabTitleFoucs_r";
}

// 显示指定的Iframe
function ShowIframe(id, url, isRef) {
	var objIframe = $("tdFramePane");
	for (i = 0; i < objIframe.childNodes.length; i++) {
		if (objIframe.childNodes[i].id == "F_" + id) {
			objIframe.childNodes[i].style.display = '';
			if (isRef == true) {
				objIframe.childNodes[i].src = url;
			}
		} else {
			objIframe.childNodes[i].style.display = 'none';
		}
	}
}

// 获取浏览器类型
function GetBrowser() {
	if (document.all)
		return "IE";
	if (document.layers)
		return "NS";
	return "OTHER";
}