简单的搭建Web系统常用的框架页面
本示例实现效果为:
1.框架frames.htm页面分上中下三部分
其中中部又分左中右三部分
2.各框架的src组成为
上导航菜单页面a
左菜单页面b 中隐显左侧菜单的页面c 右主显页面d
底部状态页面e
3.点击a的导航
联动到b的菜单 e的状态
点击b的菜单
联动到d的页面显示
点击c的相关td位置
将隐藏或显示左侧的b页面
===========================
相关代码如下
============
frames.htm
-----------
<html>
<head>
<title>frames</title>
</head>
<frameset rows="70,*,50" cols="*" frameborder="NO" border="0" framespacing="0" id="frame1">
<frame name="banner" scrolling="no" noresize src="a.htm" frameborder="0">
<frameset rows="*" cols="200,10,*" frameborder="NO" border="0" framespacing="0" id="frame2">
<frame name="leftmenu" scrolling="auto" noresize src="b.htm" frameborder="0">
<frame name="showhidemenu" scrolling="no" noresize src="c.htm" frameborder="0">
<frame name="rightmain" scrolling="auto" src="d.htm" frameborder="0">
</frameset>
<frame name="status_bar" scrolling="no" noresize src="e.htm" frameborder="0">
</frameset>
</html>
------
a.htm
------
<html>
<head>
<title></title>
<script>
function re_login()
{
parent.location="relogin.php";
}
window.setTimeout('this.location.reload();',1200000);
</script>
<script language="JavaScript">
function menu_click(menu_id)
{
parent.leftmenu.document.all.divLeftMenu.innerHTML = "图书分类" + menu_id;
parent.showhidemenu.leftmenu_open();
parent.status_bar.document.all.divNowState.innerHTML = "目前点击 图书分类" + menu_id;
}
</script>
</head>
<body>
<table width="100%">
<tr>
<td onclick="menu_click('A');">图书分类A</td>
<td onclick="menu_click('B');">图书分类B</td>
</tr>
</table>
</body>
</html>
------
b.htm
------
<html>
<head>
<script>
function GetDataToRight()
{
parent.rightmain.document.all.divRightMain.innerHTML
= document.all.divLeftMenu.innerHTML + " 相关内容 ";
}
</script>
</head>
<body>
<table width="100%">
<tr>
<td onclick="GetDataToRight()"><div id="divLeftMenu"></div></td>
</tr>
</table>
</body>
</html>
------
c.htm
------
<html>
<head>
<title>控制左菜单隐藏或显示</title>
<script language="JavaScript">
var LEFT_MENU_VIEW=0;
function leftmenu_open()
{
LEFT_MENU_VIEW=0;
leftmenu_ctrl();
}
function leftmenu_ctrl()
{
if(LEFT_MENU_VIEW==0)
{
parent.frame2.cols="200,8,*";
LEFT_MENU_VIEW=1;
}
else
{
parent.frame2.cols="0,8,*";
LEFT_MENU_VIEW=0;
}
}
</script>
</head>
<body topmargin="0" leftmargin="0" STYLE="margin:0pt;padding:0pt" onload="leftmenu_ctrl()">
<TABLE cellspacing="0" width="100%" height="100%" cellpadding="0" align="center" class="col">
<TR>
<TD>
<TABLE cellspacing="0" width="100%" height="50" bgcolor="#EEEEEE" border="1" >
<TR onclick="leftmenu_ctrl()">
<TD style="cursor:hand;">
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</body>
</html>
------
d.htm
------
<html>
<head>
<script Language=JavaScript>
var flag=1;
function showhideTop()
{
if(flag==1)
{
parent.parent.parent.frame1.rows="0,*,50";
document.all.tdShowTop.innerText = "显示上方";
}
else
{
parent.parent.parent.frame1.rows="70,*,50";
document.all.tdShowTop.innerText = "隐藏上方";
}
flag=1-flag;
}
</script>
</head>
<body>
<table width="100%">
<tr height="10">
<td align="right" id="tdShowTop" onclick="showhideTop();" >
隐藏上方
</td>
</tr>
<tr>
<td><div id="divRightMain"></div></td>
</tr>
</table>
</body>
</html>
------
e.htm
------
<html>
<body>
<table width="100%">
<tr>
<td><div id="divNowState"></div></td>
<td></td>
</tr>
</table>
</body>
</html>
1.框架frames.htm页面分上中下三部分
其中中部又分左中右三部分
2.各框架的src组成为
上导航菜单页面a
左菜单页面b 中隐显左侧菜单的页面c 右主显页面d
底部状态页面e
3.点击a的导航
联动到b的菜单 e的状态
点击b的菜单
联动到d的页面显示
点击c的相关td位置
将隐藏或显示左侧的b页面
===========================
相关代码如下
============
frames.htm
-----------
<html><head><title>frames</title></head><frameset rows="70,*,50" cols="*" frameborder="NO" border="0" framespacing="0" id="frame1"> <frame name="banner" scrolling="no" noresize src="a.htm" frameborder="0"> <frameset rows="*" cols="200,10,*" frameborder="NO" border="0" framespacing="0" id="frame2"> <frame name="leftmenu" scrolling="auto" noresize src="b.htm" frameborder="0"> <frame name="showhidemenu" scrolling="no" noresize src="c.htm" frameborder="0"> <frame name="rightmain" scrolling="auto" src="d.htm" frameborder="0"> </frameset> <frame name="status_bar" scrolling="no" noresize src="e.htm" frameborder="0"></frameset></html>
------
a.htm
------
<html><head><title></title><script>function re_login(){ parent.location="relogin.php";}window.setTimeout('this.location.reload();',1200000);</script><script language="JavaScript">function menu_click(menu_id){ parent.leftmenu.document.all.divLeftMenu.innerHTML = "图书分类" + menu_id; parent.showhidemenu.leftmenu_open(); parent.status_bar.document.all.divNowState.innerHTML = "目前点击 图书分类" + menu_id; }</script></head><body> <table width="100%"> <tr> <td onclick="menu_click('A');">图书分类A</td> <td onclick="menu_click('B');">图书分类B</td> </tr> </table></body></html>
------
b.htm
------
<html><head><script>function GetDataToRight(){ parent.rightmain.document.all.divRightMain.innerHTML = document.all.divLeftMenu.innerHTML + " 相关内容 "; }</script></head><body> <table width="100%"> <tr> <td onclick="GetDataToRight()"><div id="divLeftMenu"></div></td> </tr> </table></body></html>
------
c.htm
------
<html><head><title>控制左菜单隐藏或显示</title><script language="JavaScript">var LEFT_MENU_VIEW=0;function leftmenu_open(){ LEFT_MENU_VIEW=0; leftmenu_ctrl();}function leftmenu_ctrl(){ if(LEFT_MENU_VIEW==0) { parent.frame2.cols="200,8,*"; LEFT_MENU_VIEW=1; } else { parent.frame2.cols="0,8,*"; LEFT_MENU_VIEW=0; }}</script></head><body topmargin="0" leftmargin="0" STYLE="margin:0pt;padding:0pt" onload="leftmenu_ctrl()"> <TABLE cellspacing="0" width="100%" height="100%" cellpadding="0" align="center" class="col"> <TR> <TD> <TABLE cellspacing="0" width="100%" height="50" bgcolor="#EEEEEE" border="1" > <TR onclick="leftmenu_ctrl()"> <TD style="cursor:hand;"> </TD> </TR> </TABLE> </TD> </TR> </TABLE></body></html>
------
d.htm
------
<html><head><script Language=JavaScript>var flag=1;function showhideTop(){ if(flag==1) { parent.parent.parent.frame1.rows="0,*,50"; document.all.tdShowTop.innerText = "显示上方"; } else { parent.parent.parent.frame1.rows="70,*,50"; document.all.tdShowTop.innerText = "隐藏上方"; } flag=1-flag;}</script></head><body> <table width="100%"> <tr height="10"> <td align="right" id="tdShowTop" onclick="showhideTop();" > 隐藏上方 </td> </tr> <tr> <td><div id="divRightMain"></div></td> </tr> </table></body></html>
------
e.htm
------
<html><body> <table width="100%"> <tr> <td><div id="divNowState"></div></td> <td></td> </tr> </table></body></html>