简单的搭建Web系统常用的框架页面

weixin_33744141

于 2007-07-20 08:32:00 发布

阅读量391

点赞数

文章标签： javascript php ViewUI

本文介绍了一个使用HTML与JavaScript实现的网页框架联动示例。该示例通过frameset布局将页面分为上、中、下三部分，并能实现点击导航菜单时更新左侧菜单内容及底部状态信息的功能。同时，还演示了如何通过点击操作控制左侧菜单栏的隐藏与显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。