木子屋
 

标题: 显示/隐藏菜单

作者: dnawo

日期: 2007-04-09 02:25 PM

分类: 脚本语言

内容: 在开发一些应用程序时常会使用下图所示的布局，通过控制菜单的显示/隐藏，让整个操作界面看起来非常舒适，易用，下边我们就来说说实现过程。
实现原理：主要利用了框架技术。将主界面分成左中右三部分，左部分置放菜单页面，中间用于置放控制按钮，右边用于置放内容页面。
主要代码：
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">&nbsp;</td>
  </tr>
</table>

+ 查看当前日志评论 (0)

 

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.641 ms

标题: 显示/隐藏菜单

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.641 ms

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.641 ms