木子屋 Dnawo's BLOG

显示/隐藏菜单

👤 dnawo 📅 2007-04-09 👁 4829 👍 0 💬 0 🔄 本站原创
在开发一些应用程序时常会使用下图所示的布局,通过控制菜单的显示/隐藏,让整个操作界面看起来非常舒适,易用,下边我们就来说说实现过程。

图片

实现原理:主要利用了框架技术。将主界面分成左中右三部分,左部分置放菜单页面,中间用于置放控制按钮,右边用于置放内容页面。

主要代码:
1.主界面代码
<frameset cols="150,20,*" id="frameset1">
  <frame src="menu.htm"  name="leftFrame" id="leftFrame" />
  <frame src="control.htm"  name="controlFrame" id="controlFrame" />
  <frame src="main.htm"  name="mainFrame" id="mainFrame" />
</frameset>

2.控制页代码
<script language="javascript">
var isClose=0;
function ControlMenu(){
	if(isClose==0){
		parent.frameset1.cols="0,20,*";
		isClose = 1;
	}else{
		parent.frameset1.cols="150,20,*";
		isClose = 0;
	}
}
</script>
<table width="20" height="100%" border="0" cellpadding="0" cellspacing="0" onClick="ControlMenu()">
  <tr>
    <td bgcolor="#009999"> </td>
  </tr>
</table>

评论(0)

暂无评论。

计算题
评论需审核通过后显示
← 上一篇 优化分页中的SQL语句 下一篇 → 网页一屏有多大?