脚本语言 订阅所有【脚本语言】的日志

显示/隐藏菜单

编辑:dnawo 日期:2007-04-09

字体大小: 小 中 大
在开发一些应用程序时常会使用下图所示的布局，通过控制菜单的显示/隐藏，让整个操作界面看起来非常舒适，易用，下边我们就来说说实现过程。



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

主要代码：
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>


上一篇: 优化分页中的SQL语句
下一篇: 网页一屏有多大？
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 4387
发表评论
请登录后再发表评论！