正常访问状态! 设为首页 | 加入收藏夹 | 浏览历史  
  http://www.guosp.com
 碧海澜涛居
  海纳百川,有容乃大。壁立千刃,无欲则刚!
 
 
关键词:
  网站首页 | 关于本站 | 技术资料 | 美文日志 | 读书收藏 | 影视收藏 | 软件收藏 | 摄影相册| 留言板 
  技术资料 >> JavaScript资料库 关闭(快捷键alt+C)
搜索标签: 折叠菜单 重设 iframe
关于Iframe的尺寸重设问题(可用来制作折叠展开的菜单)
[阅读次数:1875次]  [发布时间:2011年3月8日]

以下是一个框架集,框架的结构是:顶部一行,下面分三列,三列中最左侧是菜单,中间列是折叠按钮,最右侧是主显示区。

<frameset rows="100,*" cols="*" framespacing="0" frameborder="NO" border="0" >
  <frame src="Top.asp" name="topFrame" scrolling="NO" noresize >
  <frameset cols="170,10,*" frameborder="NO" border="0" framespacing="0" name="butFrame">
    <frame src="Menu.asp" name="leftFrame" scrolling="auto" noresize>
    <frame src="midBut.asp" name="midFrame" scrolling="no">
    <frame src="Detect.asp" name="mainFrame">
  </frameset>
</frameset>

效果如下表格所示:

顶部(topFrame)
菜单
(leftFrame)
折叠按钮(midFrame) 主显示区(mainFrame)

想实现的效果是:点击中间的折叠按钮,可折叠左侧的菜单,让主显示区变大,按钮居于最左侧,再点按钮则恢复菜单显示。

一开始的思路是单独改变菜单iframe和主显示区iframe的宽度,一个减少,一个增加,这样就可以达到效果,但是可惜的是虽然iframe的尺寸改变实现了,但是整体效果却没达到,因为菜单区可以缩小,但是主显示区却无法增加,并且菜单区缩小之后也留下空白,主显示区不会随之补充过去,让人郁闷。搞了大半天换了几个别的方法也是达不到效果。最后想到猫扑上也有这种效果,就去看了下,顺滕摸瓜,两分钟不到,一句代码 document.frames('leftiframe').mainleft.rows="50%,*,30"; 引起了我的注意,马上就知道有门。因为我之前操作的都是单个iframe,没有想到框架集整体重设,按照这个思路来修改我的代码,果然,马上效果完美的呈现出来了,哈哈,真是高兴。

下面把我写的代码贴一下,供朋友们参考,有问题多交流 ^_^ (碧海澜涛)

<script language="JavaScript" type="text/javascript">
function toLeft()
{
 document.getElementById("id_but_l").style.display="none"; //我是做了向左向右两个按钮,这两句改变按钮方向
 document.getElementById("id_but_r").style.display="block";
 parent.document.all('butFrame').cols="0,10,*";
}
function toRight()
{
 document.getElementById("id_but_l").style.display="block";//这两句改变按钮方向
 document.getElementById("id_but_r").style.display="none";
 parent.document.all('butFrame').cols="170,10,*";
}
</script>

<table height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="10" height="100%" align="center" bgcolor="#80ACDB" id="id_but_l" style="cursor:pointer;display:block;" onMouseDown="toLeft()" title="点击折叠左侧菜单"><img src="images/toLeft.gif" width="6" height="9"></td>
    <td width="10" align="center" bgcolor="#80ACDB" id="id_but_r" style="cursor:pointer;display:none;" onMouseDown="toRight()" title="点击展开左侧菜单"><img src="images/toRight.gif" width="6" height="9"></td>
  </tr>
</table>





本页地址: [复制地址]
返回顶部 关闭(快捷键alt+C)
评论统计(0条)| 我要评论
暂无评论内容!
我要评论 
我要评论: 带*部分需要填写
 姓名称呼: * 请填写您的姓名或呢称
联系方式: QQ,MSN,Email都可以,方便交流 (仅管理员可见)
 评论内容: * 不超过100字符,50汉字
验证码:
    
  推荐链接
  最近更新  
·Host 'XXX' is not allowed...
·Win2008或IIS7的文件上传大...
·IIS7.0上传文件限制的解决方...
·测试信息2015-03-11
·asp.net中处理图片
·ASP.NET之Web打印-终极解决...
·Asp.net下C#调用Word模版实...
·asp.net下将页面内容导入到...
·asp.net导出为pdf文件
·asp.net生成pdf文件
·FCKeditor 文本编辑器的使用...
·ASP.NET 将数据生成PDF
·asp.net2.0导出pdf文件完美...
·AspJpeg的安装与测试
·JS验证浏览器版本对IE11的支...
  热门浏览  
·IE8和IE9出现“此网页上的问...
·无线路由器密码破解,教你断...
·js替换所有回车换行符
·QQ/MSN在线交流代码
·IE弹出“中国工商银行防钓鱼...
·如何取消键盘上的一些快捷键...
·win7声音小的解决方法
·webdav漏洞的利用
·强制两端对齐的函数或者CSS...
·win7下成功安装sql server ...
·显示器分辨率调的过高导致电...
·天诺时空技术技术论坛
·js验证手机号码格式
·JS展开和收缩效果(二)
·本地计算机上的 MSSQLSERVE...
  碧海澜涛居
网站首页关于本站站长简介开发案例技术资料美文日志摄影相册读书收藏影视收藏留言板
版权所有:碧海澜涛 QQ:410436434 Email:shaopo_guo@163.com 苏ICP备15000526号
免责声明:本站为个人网站,站内所有文字、图片等各类资料均为个人兴趣爱好所收集,不用作任何商业用途,亦不保证资料的真实性,若有因浏览本站内容而导致的各类纠纷,本站也不承担任何责任。本站部分内容来自互联网,如有涉及到您的权益或隐私请联系站长解决。