写了一个layout,拖动条连贯,内容区可为iframe


Posted in Javascript onAugust 19, 2007

写一个layout本来是一个很简单的事情,可这次的一个layout问题确让我为难了许久才做出来,下面来大概讲解一下问题的出现与解决过程。

注:本文代码皆基于jquery实现。

按照普通的方法写一个layout,一般是用一个table来实现,用中间的td拖动来控制左右两个td的大小,这个问题简单,很快就搞定。代码如下:

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>Untitled Document</title>
6 <style type="text/css">
7 *{margin:0px;padding:0px}
8 html{overflow:hidden}
9 #sideBar{width:200px;height:100%;overflow:auto}
10 #toggleBar,.div{
11 width:7px;height:100%;
12 overflow:hidden;background:#eee;
13 cursor:e-resize;border-left:1px solid #ccc;border-right:1px solid #ccc;
14 }
15 td{display:block;overflow:auto;word-break:break-all;}
16 </style>
17 <script type="text/javascript" src="../Common/jquery.gif"></script>
18 <script type="text/javascript">
19 $(document).ready(function(){
20 //及时调整页面内容的高度
21 setInterval(function(){
22 var winH=(document.documentElement||document.body).clientHeight;
23 $("#tbl,#sideBar,#toggleBar,#main").css("height",winH);
24 $("td").each(function(){$(this).html()||$(this).html(" ")});
25 },100)
26 }
27 );
28
29 var begin_x;
30 var drag_flag = false;
31 document.onmousemove = mouseDrag
32 document.onmouseup = mouseDragEnd
33 //半透明拖动条
34 var alphaDiv="<div class='div' id='alphaDiv' style='position:absolute;height:2000px;top:0;z-index:10001;filter:alpha(opacity=50);opacity:0.5;left:200px'> </div>";
35 function setDrag(){
36 drag_flag=true;
37 begin_x=event.x;
38 //添加半透明拖动条
39 $(alphaDiv).css("left",$("#toggleBar")[0].offsetLeft).appendTo("body");
40 }
41
42 //拖动时执行的函数
43 function mouseDrag(){
44 if(drag_flag==true){
45 if (window.event.button==1){
46 var now_x=event.x;
47 var value=parseInt($("#alphaDiv")[0].style.left)+now_x-begin_x;
48 $("#alphaDiv")[0].style.left=value+"px";
49 begin_x=now_x;
50 }
51 $("body").css("cursor","e-resize"); //设定光标类型
52 }else{
53 try{
54 $("#sideBar")[0].style.pixelWidth=$("#alphaDiv")[0].style.left;
55 $("#alphaDiv").remove();
56 }catch(e){}
57 }
58 }
59
60 function mouseDragEnd(){
61 //设置拖动条的位置
62 if(drag_flag==true){
63 //设定拖动条的位置(设定左侧的宽度)
64 $("#sideBar")[0].style.pixelWidth=parseInt($("#alphaDiv")[0].style.left);
65 $("#alphaDiv").remove(); //删除半透明拖动条
66 $("body").css("cursor","normal"); //恢复光标类型
67 }
68 drag_flag=false;
69 }
70 </script>
71 </head>
72 <body>
73 <table id="tbl" border="0" bordercollaspe="collapse" cellpadding="2" cellspacing="0" width="100%" height="100%">
74 <tr>
75 <td width="1"><div id="sideBar" style="width:200px;"><div style="height:1200px">asdfasdf</div></div>
76 </td>
77 <td width="1" onmousedown="setDrag()" id="toggleBar"></td>
78 <td id="main">
79 right Panel
80 </td>
81 </tr>
82 </table>
83 </body>
84 </html>
演示地址:http://www.ajaxbbs.net/test/layout/JqSplit/noiframe.htm
上面的这种写法也是大多数layout的写法,著名框架dojo好像也是这么实现的,其他的没试。

但现在的情况仍然不能满足我们的需求,我们需要左侧或右侧是ifame,通过iframe调用相关的页面,在前面的代码中将右侧改为iframe。
演示地址:http://www.ajaxbbs.net/test/layout/JqSplit/iframeRight.htm

这时我们就发现问题了,只能向左边拖动,但不能像右边拖动,这是为什们呢?
经过检查,发现原来当鼠标移动到iframe上就无法捕获鼠标的位置了,event对象也不存在。得不到鼠标的位置我们的拖动当然会出现问题了。

这个问题着实让我郁闷了许久,然后测试其他的一些layout(对iframe进行了处理)发现凡是使用iframe的都有一个缺陷,当鼠标拖动速度很快的时候,拉动条速度跟不上(当然这些并没有那个模拟的半透明的拖动条,直接拖动真实的拖动条的),感觉就是很不流畅很不同步。
我们看一下直接拖动真是滚动条的情况
演示地址:http://www.ajaxbbs.net/test/layout/JqSplit/iframeRightNoAlpha.htm
我们慢速度拖动还是可以向右移动的,但一但速度稍快便不能拖动了。

对于这个问题始终没有想到好的解决办法,就在我悲伤的即将放弃时,看到前几天写的一个模拟弹出框,因为当时测试弹出框应该要遮住包括iframe在内的select。所以页面中使用了ifame。突然发现一个索引很高的层能够遮住iframe,突然间就有了灵感,马上实验。

思路如下:拖动拉条时在页面添加一个索引很大的层(如10000),将其透明度设为0(完全透明),这样鼠标就不会移动到iframe中,但iframe仍然存在可以看到。当拖动结束(onmouseup)时去掉这个层即可,这样就实现了比较完美的拖动。

演示地址:
http://www.ajaxbbs.net/test/layout/JqSplit/demo.htm
我们看一下完整的代码:

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>Untitled Document</title>
6 <style type="text/css">
7 *{margin:0px;padding:0px}
8 html{overflow:hidden}
9 #sideBar{width:200px;height:100%;overflow:auto}
10 #toggleBar,.div{
11 width:7px;height:100%;
12 overflow:hidden;background:#eee;
13 cursor:e-resize;border-left:1px solid #ccc;border-right:1px solid #ccc;
14 }
15 td{display:block;overflow:auto;word-break:break-all;}
16 </style>
17 <script type="text/javascript" src="../Common/jquery.js"></script>
18 <script type="text/javascript">
19 $(document).ready(function(){
20 //及时调整页面内容的高度
21 setInterval(function(){
22 var winH=(document.documentElement||document.body).clientHeight;
23 $("#tbl,#sideBar,#toggleBar,#main").css("height",winH);
24 $("td").each(function(){$(this).html()||$(this).html(" ")});
25 },100)
26 }
27 );
28
29 var begin_x;
30 var drag_flag = false;
31 document.onmousemove = mouseDrag
32 document.onmouseup = mouseDragEnd
33 //半透明的拖动条(模拟)
34 var alphaDiv="<div class='div' id='alphaDiv' style='position:absolute;height:2000px;top:0;z-index:10001;filter:alpha(opacity=50);opacity:0.5;left:200px'> </div>";
35 function setDrag(){
36 drag_flag=true;
37 begin_x=event.x;
38 //添加蒙板
39 createMask();
40 //添加半透明拖动条
41 $(alphaDiv).css("left",$("#toggleBar")[0].offsetLeft).appendTo("body");
42 }
43
44 //关键部分
45 function createMask(){
46 //创建背景
47 var rootEl=document.documentElement||document.body;
48 var docHeight=((rootEl.clientHeight>rootEl.scrollHeight)?rootEl.clientHeight:rootEl.scrollHeight)+"px";
49 var docWidth=((rootEl.clientWidth>rootEl.scrollWidth)?rootEl.clientWidth:rootEl.scrollWidth)+"px";
50 var shieldStyle="position:absolute;top:0px;left:0px;width:"+docWidth+";height:"+docHeight+";background:#000;z-index:10000;filter:alpha(opacity=0);opacity:0";
51 $("<div id='shield' style=\""+shieldStyle+"\"></div>").appendTo("body");
52 }
53 //拖动时执行的函数
54 function mouseDrag(){
55 if(drag_flag==true){
56 if (window.event.button==1){
57 var now_x=event.x;
58 var value=parseInt($("#alphaDiv")[0].style.left)+now_x-begin_x;
59 $("#alphaDiv")[0].style.left=value+"px";
60 begin_x=now_x;
61 }
62 $("body").css("cursor","e-resize"); //设定光标类型
63 }else{
64 try{
65 $("#shield").remove();
66 $("#sideBar")[0].style.pixelWidth=$("#alphaDiv")[0].style.left;
67 $("#alphaDiv").remove();
68 }catch(e){}
69 }
70 }
71
72 function mouseDragEnd(){
73 //设置拖动条的位置
74 if(drag_flag==true){
75 //设定拖动条的位置(设定左侧的宽度)
76 $("#sideBar")[0].style.pixelWidth=parseInt($("#alphaDiv")[0].style.left);
77 $("#shield").remove(); //删除蒙板
78 $("#alphaDiv").remove(); //删除半透明拖动条
79 $("body").css("cursor","normal"); //恢复光标类型
80 }
81 drag_flag=false;
82 }
83 </script>
84 </head>
85 <body>
86 <table id="tbl" border="0" bordercollaspe="collapse" cellpadding="2" cellspacing="0" width="100%" height="100%">
87 <tr>
88 <td width="1"><div id="sideBar" style="width:200px;"><div style="height:1200px">asdfasdf</div></div>
89 </td>
90 <td width="1" onmousedown="setDrag()" id="toggleBar"></td>
91 <td id="main">
92 <iframe src="test.htm" id="frmMain" width="100%" height="100%"></iframe>
93 </td>
94 </tr>
95 </table>
96 </body>
97 </html>

算是自己的一点发现,一点心得吧,不知对大家有没有用处,只管拿出来献丑了!(首发于蓝色经典)
Javascript 相关文章推荐
JavaScript 版本自动生成文章摘要
Jul 23 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
TypeScript中的方法重载详解
Apr 12 Javascript
Electron vue的使用教程图文详解
Jul 05 Javascript
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 #Javascript
Code: write(s,d) 输出连续字符串
Aug 19 #Javascript
js实现运行代码需要刷新的解决方法
Aug 18 #Javascript
javascript下阻止表单重复提交、防刷新、防后退
Aug 17 #Javascript
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 #Javascript
wordpress之js库集合研究介绍
Aug 17 #Javascript
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 #Javascript
You might like
php设计模式 Proxy (代理模式)
2011/06/26 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
python matplotlib中文显示参数设置解析
2017/12/15 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
Pytorch释放显存占用方式
2020/01/13 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
美国翻新电子产品商店:The Store
2019/10/08 全球购物
电子工程专业毕业生求职信
2014/03/14 职场文书
经理任命书模板
2014/06/06 职场文书
校园标语大全
2014/06/19 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
道歉短信大全
2015/05/12 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
话题作文之学会尊重
2019/12/16 职场文书
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers
python高温预警数据获取实例
2022/07/23 Python