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>