网页框架集设计与实现-优快云博客

主页面


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<frameset rows="80,*" cols="*" frameborder="no" border="1" framespacing="0">
  <frame src="top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
  <frameset cols="80,*" frameborder="no" border="1" framespacing="0">
    <frame src="left.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
    <frame src="main.html" name="mainFrame" id="mainFrame" title="mainFrame" />
  </frameset>
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>

top

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
	function  popMenu(obj,type){
			if(navigator.appVersion.match(/7./i)=='7.'){	//ie 7
				parent.mainFrame.addPage("index.htm","aaaaa");
			} 
			else if(navigator.appVersion.match(/6./i)=='6.'){//ie6
				parent.mainFrame.addPage("index.htm","aaaaa");
			}
	}
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="4"style="border-collapse: collapse;border:0px solid #99BBEE;height:30px;">
  <TR>
    <td width="90" nowrap align="left" id="baseDict"><span onclick="popMenu(this,0)">基础字典</span></td>
  </TR>
</TABLE>
</body>
</html>

top

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<HEAD>
	<link rel="stylesheet" type="text/css" href="css/comm.css">
	<style>
	.titlt_onMouse{
		background: #008800;
	}
	.title_onblur{
		background: #008800;
	}
	.title{
		font-size:9pt;
		color:#000000;
		font-weight:bold;
		padding-left:1px;
		border:0px solid #010101;
		height:20px;
		text-align: left;
		vertical-align: middle;
		background: #FFFFFF;
		cursor:hand;
	}
	</style>
	</HEAD>
	<script language="javascript" src="javascript/comm.js"></script>
	<script type="text/javascript">
	var pageIndex = "";
	function addTitle(title){
		var tb = document.getElementById("tableTitle");
		var tdTitle = document.createElement("TD");
		tdTitle.className = "title";
		var str = "<table onclick=\"change(this)\" ondblclick=\"closeMe(this)\" style=\"height:20px;\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr>";
		str += "<td style=\"width:4px;background-image: url('image/l1.gif')\"></td>";
		str += "<td style=\"background-image: url('image/b1.gif');color:#FFFFFF;padding-top:4px;height:20px;\" nowrap=\"nowrap\">"+title+"</td>";
		str += "<td style=\"width:24px;height:20px;background-image: url('image/4.gif')\"></td>";
		str += "</tr></table>";
		tdTitle.innerHTML=str;
		tb.rows[0].appendChild(tdTitle);
	}
	function addFrame(url){
		var div = document.createElement("DIV");
		var frame = document.getElementById("divFrame");
		div.innerHTML="<iframe border=\"0\" scrolling=\"no\" style=\"width:100%;height:100%;border-top: 1px solid #70A6F6;\" frameborder=\"none\"  src=\""+url+"\"></iframe>";
		hiddenOthers(frame.childNodes.length);
		frame.appendChild(div);
	}
	function hiddenOthers(current){//显示当前
		var tb = document.getElementById("tableTitle");
		for(var i=0;i<tb.rows[0].cells.length;i++){
			if(i==current){
				tb.rows[0].cells[i].childNodes[0].rows[0].cells[1].style.fontWeight="bold";
				tb.rows[0].cells[i].childNodes[0].rows[0].cells[1].style.color="#FFFFFF";
				tb.rows[0].cells[i].childNodes[0].style.borderBottom="1px solid #70A6F6";
			}else{
				tb.rows[0].cells[i].childNodes[0].rows[0].cells[1].style.fontWeight="normal";
				tb.rows[0].cells[i].childNodes[0].rows[0].cells[1].style.color="#666666";
				tb.rows[0].cells[i].childNodes[0].style.borderBottom="1px solid #ffffff";
			}
		}

		var div = document.getElementById("divFrame");
		for(var i=0;i<div.childNodes.length;i++){
			if(i==current){
				div.childNodes[i].style.display = "block";
			}else{
				div.childNodes[i].style.display = "none";
			}
		}
		pageIndex = current;
	}
	function change(obj){//单击
		hiddenOthers(obj.parentNode.cellIndex);
		if(window.divFrame.childNodes[pageIndex].childNodes[0].src.indexOf("business")==0){//业务单据每进入页面自动重新加载
			refushCurrentPage2(obj.parentNode.cellIndex);
		}
	}
	function closeMe(obj){//双击
		removePage(obj.parentNode.cellIndex);
	}
	function addPage(url,title){//添加
		addTitle(title);
		addFrame(url);
	}
	function removePage(i){//删除
		var tb = document.getElementById("tableTitle");
		var frame = document.getElementById("divFrame");
		tb.rows[0].deleteCell(i);
		frame.childNodes[i].removeNode(true)
		if(i==0){
			hiddenOthers(0);
		}
		else if(i == frame.childNodes.length){
			hiddenOthers(i-1);
		}
		else{
			if(frame.childNodes.length>2){
				hiddenOthers(i);
			}else{
				hiddenOthers(0);
			}
		}
	}
	function closeCurrentPage(){
		removePage(pageIndex);
	}
	function refushCurrentPage(){
		var frame = document.getElementById("divFrame");
		if(window.divFrame.childNodes.length==0){//no page
			return;
		}
		window.divFrame.childNodes[pageIndex].childNodes[0].src = window.divFrame.childNodes[pageIndex].childNodes[0].src;
	}
	function refushCurrentPage2(pageIndex){
		var frame = document.getElementById("divFrame");
		if(window.divFrame.childNodes.length==0){//no page
			return;
		}
		window.divFrame.childNodes[pageIndex].childNodes[0].src = window.divFrame.childNodes[pageIndex].childNodes[0].src;
	}
	//background-image: url(image/ben.jpg)filter:alpha(opacity=50);
	</script>
	<BODY style="margin:0 0 0 0;width:100%;height:100%;">
		<div id="divWork" style="width:100%;height:20px;background: #FFFFFF;">
			<div id="divTitle" style="width:100%;height:20px;">
				<table id="tableTitle" style="margin-top:1px;border-collapse: collapse;background: #ff0000;" border="0" cellpadding="0" cellspacing="0">
					<tr>
					</tr>
				</table>
			</div>
		</div>
		<div id="divFrame" style="width:100%;height:100%;"></div>
	</BODY>
</HTML>

left


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
left
</body>
</html>