js控制框架页显示
2012-12-26 18:31
232 查看
经常看到别人做的框架页可以收缩,自己也想做一个。偷偷研究了一下,发现并不神秘。嘿嘿。不敢独享跟我一样的菜鸟可以偷学两招。嘿嘿。基本的效果可以看下图:
仔细观察下面的页面,大多数人会回答是一个左右分的框架。呵呵。不然,其实他是左中右三分的框架页。只不过中间的框架页宽度非常之小而已。 查看源码可以知道主框架源码如下:
<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,右边还为*,这是左边框架就跟消失了一样。呵呵。不错吧。
好了,好的东西要大家一起分享。
仔细观察下面的页面,大多数人会回答是一个左右分的框架。呵呵。不然,其实他是左中右三分的框架页。只不过中间的框架页宽度非常之小而已。 查看源码可以知道主框架源码如下:
<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,右边还为*,这是左边框架就跟消失了一样。呵呵。不错吧。
好了,好的东西要大家一起分享。
相关文章推荐
- js控制框架页显示
- js控制框架页显示
- js控制表格静态分页显示
- js 控制 页面控件 显示 隐藏
- js 控制textbox的显示与隐藏
- js用下拉菜单控制表格显示与否
- js弹出窗体——控制下拉条的是否显示…
- 微信小程序弹出loading层的两种方法:直接在代码里控制,在wxml文件里布局弹窗loading层,利用条件渲染,在js代码里控制是否显示loading层。
- Js控制弹窗实现在任意分辨率下居中显示
- JS实现控制图片显示大小的方法【图片等比例缩放功能】
- js自带的toFixed函数控制小数点的显示位数,来进行四舍五入的操作
- js控制元素的显示与隐藏
- JS控制HTML元素的显示和隐藏
- JS控制日期显示
- js点击某个元素控制div显示,点击除div区域外任意处div隐藏
- JS控制图片显示的大小(图片等比例缩放)
- 【js与jquery】js控制图片显示大小(图片等比例缩放)
- html中js实现左边框控制右边框的显示
- JS控制HTML元素的显示和隐藏的2种方法
- JS控制图片显示的大小(图片等比例缩放)