简单的搭建Web系统常用的框架页面
2007-07-20 08:32
453 查看
本示例实现效果为:
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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 简单的搭建Web系统常用的框架页面
- golang实战使用gin+xorm搭建go语言web框架restgo详解3 系统常用配置参数
- Spring boot 入门系列（一）：快速搭建一个简单web系统（简单的SSM框架）
- 【干货】利用MVC5+EF6搭建博客系统（四）（上）前后台页面布局页面实现，介绍使用的UI框架以及JS组件
- ServerSocket搭建简单的web页面
- CXF框架整合SPring 搭建WebServce简单实例
- python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
- python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
- 详解Eclipse搭建一个简单的Web系统及其遇到的问题
- C#开发的WEB开发的简单框架 节省开发信息管理系统时间 提高开发效率
- 搭建系统框架发现的三个Web.Config问题
- webpack搭建简单的多页面应用
- （9）uniGUI for C++ builder下如何使用UniPageControl控件做成WEB多页面系统界面框架？
- node使用express搭建简单web框架并实现文件上传
- android 通过webView,简单的通过网页唤起本地界面,如果比较多的话最好不要用原生的webView和js去搭建,用框架去做
- div+css搭建系统页面框架
- 一步一步实现web程序信息管理系统之二----后台框架实现跳转登陆页面
- 搭建一个简单的基于web的网络流量监控可视化系统
- 搭建系统框架发现的三个Web.Config问题
- 简单web系统页面构架(二级伸缩式左菜单)