本示例实现效果为:
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>
