效仿126邮箱tabcontrol的界面框架(这个东东对不善界面的你也许期待了很久) 12月17号下午7点做了部分代码更新
潜水多年今天终于冒了第一的泡泡。
说明：
这是本人在美工的配合下效仿126邮箱界面做的一公用界面，基本上适合很多信息管理系统的界面要求。本人的CSS和JAVASCIRPT的功底有限，开发的东西难免会有些BUG或者很肤浅的地方，希望和朋友们一起探讨解决其中的一些问题。也非常希望高手们优化我的JS。
效果一
效果二
效果三
效果四
功能介绍：
1、可以换皮肤，其中主框架、具体页面可以统一使用皮肤。
2、tab页标题有右键菜单，新开、全屏打开，刷新。双击标题也可以刷新。
3、可以收放菜单栏。
4、在vs2005下开发完成，实际上只是JS+HTML+CSS 所以很方便的移植到ASP PHP JSP 上去。
5、做web的还是希望把这些界面功能写在客户端，有时候还真有点讨厌.Net的postback.
6、在firlfox上运行有点小问题。暂时只支持IE。
使用方法：
基本上主框架页面不需要作任何的变动了，直接就可以用，就不讲了。
在这里主要讲一下使用tabControl：
tabControl新开一个页面实际上是通过JS在主显示区域建立一个iframe 把这个iframe的src 指向我们指定的页面。
1、 调用方法
var myTab = new HTabControl(_skinId,true); //_skinId 是tab的皮肤编号，现在有４套，第二个参数是指页头是否显示关闭按纽。
document.write(myTab.init()); //初试化
top.myTab.Cts('标题','url',false); //以只聚焦不刷新的方式打开。
top.myTab.Cts('标题','url',true); //以聚焦并且刷新该页的方式打开。
之所以有两种不同的方式打开，是考虑打开页面以后，第二次再打开页的时候有两种需求。
a、刷新目标页 b、不刷新目标页
2、在其他页面使用tab控件的方法可以点左边菜单的链接。
讨厌的BUG：
这个BUG一直都困饶了我好长时间，并且实在不知道怎么解决，甚至连问题出在哪里都不知道。
BUG描述：在频繁的打开关闭的时候tab页后，有时候会出现界面里的textbox控件鼠标点击无法聚焦的问题。整体刷新框架就可以聚焦了。奇怪！
这里下载代码：很希望高手能优化一下我的代码，供大家一起来学习。
看在兄弟这么热心的份上，请多帮帮忙！一定要帮我解决这个BUG
12月17号下午7点做了部分代码更新下载
以下是主代码
!--
document.write('<DIV id="PendingMessage" class="Load"> </DIV>');
function document.onreadystatechange()
{
if (document.readyState == "complete")
{
HiddenLoading();
}
}
function ShowLoading()
{
$('PendingMessage').style.display = "block";
}
function HiddenLoading()
{
$('PendingMessage').style.display = "none";
}
var _stylePath = null//图片所在的路径
var _curentFrame = null;//当前框架的ID
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;
_stylePath = _path + "Main/Skin/Tab"+ tabSkinId +"/";
this.init = function()
{
loadStyle(tabSkinId,"tab.css");
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='rightMenuItem2' onclick='fullOpen(_curentUrl)'>全屏打开</td></tr>"+
"<tr><td class='rightMenuItem3' 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 > 25 )
{
alert("您打开了太多的窗口，可能导致页面局部变形。建议关闭一部分窗口");
}
}
//聚焦到该页
FoucsPage(title,url,isRef);
CollectGarbage();//清理浏览器内存
_curentUrl = url;
HiddenDiv('tabContextMenu');
}
}
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" ;
}
//-->
document.write('<DIV id="PendingMessage" class="Load"> </DIV>');
function document.onreadystatechange()
{
if (document.readyState == "complete")
{
HiddenLoading();
}
}
function ShowLoading()
{
$('PendingMessage').style.display = "block";
}
function HiddenLoading()
{
$('PendingMessage').style.display = "none";
}
var _stylePath = null//图片所在的路径
var _curentFrame = null;//当前框架的ID
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;
_stylePath = _path + "Main/Skin/Tab"+ tabSkinId +"/";
this.init = function()
{
loadStyle(tabSkinId,"tab.css");
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='rightMenuItem2' onclick='fullOpen(_curentUrl)'>全屏打开</td></tr>"+
"<tr><td class='rightMenuItem3' 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 > 25 )
{
alert("您打开了太多的窗口，可能导致页面局部变形。建议关闭一部分窗口");
}
}
//聚焦到该页
FoucsPage(title,url,isRef);
CollectGarbage();//清理浏览器内存
_curentUrl = url;
HiddenDiv('tabContextMenu');
}
}
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" ;
}
//-->
