js控制框架页显示 [转载]

上一篇 / 下一篇  2007-08-16 15:48:17 / 个人分类：HTML

查看( 454 ) / 评论( 0 ) / 评分( 0 / 0 )

`$Z4u[1_6T[:p_{!L0经常看到别人做的框架页可以收缩，自己也想做一个。偷偷研究了一下，发现并不神秘。嘿嘿。不敢独享跟我一样的菜鸟可以偷学两招。嘿嘿。基本的效果可以看下图：
)Wm]U E rrP&M @;i0
%v|ZB ID0
!x\@C awr3V1z0
9CE"DI eh8I&[6i0仔细观察下面的页面，大多数人会回答是一个左右分的框架。呵呵。不然，其实他是左中右三分的框架页。只不过中间的框架页宽度非常之小而已。 查看源码可以知道主框架源码如下：51Testing软件测试网*M0u B!p {/B#j$ipNY&A
51Testing软件测试网1h![%h2e(o
51Testing软件测试网e3DA4TK(BJ+IQ

<frameset rows="*" cols="156,8,*" frameborder="0" border="0" id="frame" >51Testing软件测试网c/vial1S
  <frame src="menu.html" name="leftFrame" scrolling="auto" frameborder="0" />
;ERVXt0X?2j G8?^0  <frame src="center.html" name="centerFrame" scrolling="auto" id="leftFrame" frameborder="0" />51Testing软件测试网#J8\$}5qAi-QKS%W
  <frameset rows="80,*" frameborder="no" border="0" >51Testing软件测试网*ss}*b\3w
    <frame src="top.html" name="topFrame" scrolling="no" frameborder="0" id="topFrame" />51Testing软件测试网_ R!P$H.c*|yvc1_
    <frame src="login.html" name="mainFrame" frameborder="0" />
?X@ m0A8vf;p0  </frameset>51Testing软件测试网&nPF7yX6N1@9e
</frameset>51Testing软件测试网,Nnm.z7T
<noframes><body>对不起,您的浏览器版本不支持框架技术.</body></noframes>
51Testing软件测试网(R7F-FOzR
51Testing软件测试网Es&|0b9XB4N
它将框架分为左中右三分的。中间的框架页宽度只有8.左边设置了156。右边为剩余大小。关键的部分还是在中间的页面。注意frameset的id叫frame.下面会用到。所有的动态改变框架的代码全部隐藏在中间的页面中。代码如下：51Testing软件测试网[vFU4F"b
51Testing软件测试网"HFt:W{w \
<scrīpt>51Testing软件测试网7U-_6S H&G%YH3h m ^
 var displayBar=true;
(C7y ]#E z0 function switchBar(obj) {51Testing软件测试网V]vAE.Zs psy
  if (displayBar){51Testing软件测试网lQ&A{SX
   parent.frame.cols="0,8,*";
0{[~f.{QZ0   displayBar=false;
'}2R6ECk0   obj.src="image/center_open.gif";
QW[j"zce Wy0   obj.title="打开左边管理菜单";
7xp pb8Ip0  }else{51Testing软件测试网UWm)R$go$f
   parent.frame.cols="156,8,*";
|aj-`.`,d.[6f3G0   displayBar=true;
b[%A2C$@egY0   obj.src="image/center_close.gif";51Testing软件测试网,] Gcg\.D)hb E
   obj.title="关闭左边管理菜单";
:u9X8y9yyaq X7X0  }51Testing软件测试网e.~:yysIHeZ:N
 }51Testing软件测试网!U#u3|*{q(I
 </scrīpt>
&i9e CC,|zx051Testing软件测试网e6L)~1a'H$Q
 <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" background="image/center_bg.gif">
@-ZDb-fcrz G0  <tr>51Testing软件测试网8t)CH6? Fb
   <td valign="center"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>51Testing软件测试网-{-?#FZ:F?r hD
   <img src="image/center_close.gif" style="cursor:hand" title="关闭左边管理菜单" onClick="switchBar(this)"></td>51Testing软件测试网8^xT9n|u!i9Q
  </tr>51Testing软件测试网[2F;K3wS#b(DWi
 </table>
51Testing软件测试网kk+pj0@dv
关键的代码已经看到了吧。关键的代码只有一句。就是在图片按钮的onclick事件中改变父窗体中元素frame的cols的值，其实也就是改变了左中右框架的宽度。打开时左边的宽度为156，中间为8，右边为*，关闭时左边为0,中间为8，右边还为*，这是左边框架就跟消失了一样。呵呵。不错吧。  
好了，好的东西要大家一起分享。

收藏 举报

TAG: HTML

 

评分：0

我来说两句

Open Toolbar