js控制框架页显示[转]

最新推荐文章于 2023-03-16 17:13:18 发布

we will rock you

最新推荐文章于 2023-03-16 17:13:18 发布

阅读量75

点赞数

分类专栏： Javascript 文章标签： JavaScript ViewUI

本文链接：https://blog.csdn.net/rockstar541/article/details/84341859

版权

Javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

js控制框架页显示

经常看到别人做的框架页可以收缩，自己也想做一个。偷偷研究了一下，发现并不神秘。嘿嘿。不敢独享跟我一样的菜鸟可以偷学两招。嘿嘿。基本的效果可以看下图：

仔细观察下面的页面，大多数人会回答是一个左右分的框架。呵呵。不然，其实他是左中右三分的框架页。只不过中间的框架页宽度非常之小而已。查看源码可以知道主框架源码如下：

<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，右边还为*，这是左边框架就跟消失了一样。呵呵。不错吧。

好了，好的东西要大家一起分享。

we will rock you

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js控制框架页显示[转]

js控制框架页显示经常看到别人做的框架页可以收缩，自己也想做一个。偷偷研究了一下，发现并不神秘。嘿嘿。不敢独享跟我一样的菜鸟可以偷学两招。嘿嘿。基本的效果可以看下图：仔细观察下面的页面，大多数人会回答是一个左右分的框架。呵呵。不然，其实他是左中右三分的框架页。只不过中间的框架页宽度非常之小而已。查看源码可以知道主框架源码如下：&lt;frameset rows="*"...
复制链接

扫一扫