|
经常看到别人做的框架页可以收缩，自己也想做一个。偷偷研究了一下，发现并不神秘。嘿嘿。不敢独享跟我一样的菜鸟可以偷学两招。嘿嘿。基本的效果可以看下图： <frameset rows="*" cols="156,8,*" frameborder="0" border="0" id="frame" >
<frame src="menu.html" name="leftFrame" scrolling="auto" frameborder="0" /> <frame src="center.html" name="centerFrame" scrolling="auto" id="leftFrame" frameborder="0" /> <frameset rows="80,*" frameborder="no" border="0" > <frame src="top.html" name="topFrame" scrolling="no" frameborder="0" id="topFrame" /> <frame src="login.html" name="mainFrame" frameborder="0" /> </frameset> </frameset> <noframes><body>对不起,您的浏览器版本不支持框架技术.</body></noframes> 它将框架分为左中右三分的。中间的框架页宽度只有8.左边设置了156。右边为剩余大小。关键的部分还是在中间的页面。注意frameset的id叫frame.下面会用到。所有的动态改变框架的代码全部隐藏在中间的页面中。代码如下：  <script> var displayBar=true;  function switchBar(obj) ...{  if (displayBar)...{ parent.frame.cols="0,8,*"; displayBar=false; obj.src="image/center_open.gif"; obj.title="打开左边管理菜单"; }else...{ parent.frame.cols="156,8,*"; displayBar=true; obj.src="image/center_close.gif"; obj.title="关闭左边管理菜单"; } } </script> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" background="image/center_bg.gif"> <tr> <td valign="center"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> <img src="image/center_close.gif" style="cursor:hand" title="关闭左边管理菜单" onClick="switchBar(this)"></td> </tr> </table>关键的代码已经看到了吧。关键的代码只有一句。就是在图片按钮的onclick事件中改变父窗体中元素frame的cols的值，其实也就是改变了左中右框架的宽度。打开时左边的宽度为156，中间为8，右边为*，关闭时左边为0,中间为8，右边还为*，这是左边框架就跟消失了一样。呵呵。不错吧。 好了，好的东西要大家一起分享。
|
|
|
