注册 | 登录 忘记密码? 51cto首页 | 博客 | 论坛 | 招聘
热点文章 负载均衡技术沙龙问答汇集
 帮助

框架折叠/展开的脚本(自适应分辨率)


2007-07-30 00:03:44
 标签:javascript   [推送到技术圈]

版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://shuxiao.blog.51cto.com/84971/36169
//首先定义一个全局变量,用来判断折叠或者展开的状态
var s = true;
function sw(){
//左侧框架
 var left=document.getElementById("left");
//右侧框架
 var right=document.getElementById("right");
//中间框架,放置动作按钮
 var midd=document.getElementById("midd");
//动作按钮
 var xy = document.getElementById("xy");

 
 if (s){
  xy.src = "images/jt2.jpg";   //左侧框架折叠时动作按钮的图片
  xy.alt = "展开左栏";   //左侧框架折叠时动作按钮显示的提示文字
  left.style.display = "none";   //隐藏左侧框架
  midd.style.left = 0;  //使动作按钮靠近屏幕左侧
  right.style.left = 7;   //使右侧框架的左边句等于中间框架的宽度
  right.style.width=window.screen.availWidth-17;  //根据分辨率自动调整右侧框架的宽度
  }else{
  xy.src = "images/jt1.jpg";
  xy.alt = "隐藏左栏";
  left.style.display = "";
  midd.style.left = 170;
  right.style.left = 177;
  right.style.width=window.screen.availWidth-187;
  }
  s = !s;
}
备注说明:
1.将该脚本保存成一个JS文件,包含到需要的页面当中;
2.根据实际情况改变脚本中变量所对应的框架ID以及动作按钮图片ID;
3.以该脚本为例,动作按钮代码如“<img src="images/jt1.jpg" alt="隐藏左栏" id="xy" onclick="sw()"/>”;
 
实例截图:
1.框架展开时:
 
2.框架折叠时:

本文出自 “网工笔记” 博客,请务必保留此出处http://shuxiao.blog.51cto.com/84971/36169


附件下载:
  关于这篇文章的源码




    文章评论
 
2007-07-30 22:49:57
现在的好多论坛都用这个哎。
哇卡卡,不错

2007-08-07 19:42:12
看的不明白呀,能不能将源码都传上来下载呀?谢谢!!

2007-08-09 22:17:46
应这位匿名网友的要求,我现在已经将源码上传 ,但愿你能看明白。

2007-08-16 10:27:18
不错,挺实用的

2007-08-23 16:19:55
这个是在asp中用的吗

2007-08-23 16:27:39
我不知道怎样调用

2007-08-23 16:31:00
快回答好吗

2007-08-23 20:02:15
具体的调用方法,我已经提供了该文件的源码供下载,你可以在这篇文章的最下放看到“关于这篇文章的源码”,点击即可下载。

 

发表评论

昵   称:
验证码:  点击图片可刷新验证码  博客过2级,无需填写验证码
内   容: