后台页面常用的框架的开合

 后台页面常用的框架的开合:

控制页代码:
<style type="text/css">
<!--
body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
}
-->
</style>

<script language="javascript">
 function tt()
 {
  //alert(parent.mainFrame.cols);
  var cols_str=parent.mainFrame.cols;
  var left_fram_width=cols_str.substring(0,cols_str.indexOf(","));
  //alert(left_fram_width);
  if(left_fram_width>20)
  {
   parent.mainFrame.cols="0,6,*";
   document.form1.iim.src="../images/right.gif";
  }
  else
  {
   parent.mainFrame.cols="200,6,*";
   document.form1.iim.src="../images/left.gif";
  }
  //alert(document.form1.iim.src);
  
 }
</script>
</head>

<body bgcolor="#747474">
<form name="form1">
 <table height="100%" cellspacing="0px">
   <tr><td width="8" valign="middle"><a style="CURSOR: hand" οnclick="javascript:tt()"><img name="iim" src="left.gif"/></a></td>
   </tr>
  </table>
</form>
</body>
</html>
主页代码:
</head>

<frameset rows="100%,*" frameborder="no" border="0" framespacing="0">
    <frameset cols="200,6,*" framborder="no" name="mainFrame" >
     <frame src="left.jsp" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
     <frame src="contr.jsp" name="contrFrame" scrolling="No" noresize="noresize" id="contrFrame" title="contrFrame" />
      <frame src="navbg.jsp" name="middleFrame" id="middleFrame" title="middleFrame" />
    </frameset>
</frameset>
<noframes><body>
</body>
</noframes></html>

红色部分就是你要包含进来的两个页面。

<frameset rows="100%,*" frameborder="no" border="0" framespacing="0">
中rows中100%指定高度。

 

控制页中:cols_str.substring(0,cols_str.indexOf(","));
取到主页中 cols="200,6,*" 。

用JS确定是开还是合。

 

 

这样就完成了开合。

附箭头图。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
真的很不错的模板 <html <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Ext 做的后台管理系统</title> <style type="text/css"> body{ font-size:12px; background-image: url(images/bg.gif); background-repeat: repeat; } ul,li,h2{margin:0;padding:0;} ul{list-style:none;} #top{ width:909px; height:26px; background-image: url(images/h2bg.gif); margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; background-repeat: repeat-x; } #top h2{ width:150px; height:24px; float:left; font-size:12px; text-align:center; line-height:20px; color:#0066FF; font-weight: bold; padding-top: 2px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #99BBE8; border-left-color: #99BBE8; } #top .jg { width: 5px; float: left; background-color: #DCE6F5; height: 26px; } #topTags{ width:740px; height:24px; float:left; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; padding-top: 2px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #99BBE8; border-left-color: #99BBE8; padding-left: 10px; } #topTags ul li{ float:left; width:100px; height:21px; margin-right:4px; display:block; text-align:center; cursor:pointer; padding-top: 3px; color: #15428B; font-size: 12px; } #main{ width:909px; height:501px; background-color:#F5F7E6; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } #main .jg { width: 5px; float: left; background-color: #DFE8F6; height: 500px; } #leftMenu{ width:150px; height:500px; background-color:#DAE7F6; float:left; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #99BBE8; bor
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值