编程 Javascript

写了一个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>

算是自己的一点发现，一点心得吧，不知对大家有没有用处，只管拿出来献丑了！（首发于蓝色经典）

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript prototype，executing，context，closure

Dec 24 Javascript

javascript 打印页面代码

Mar 24 Javascript

用jquery实现点击栏目背景色改变

Dec 10 Javascript

javascript ajax 仿百度分页函数

Oct 29 Javascript

JS表格组件BootstrapTable行内编辑解决方案x-editable

Sep 01 Javascript

Bootstrap Table使用整理（三）

Jun 09 Javascript

JS中数组与对象的遍历方法实例小结

Aug 14 Javascript

详解vue移动端项目代码拆分记录

Mar 15 Javascript

JS匿名函数内部this指向问题详析

May 10 Javascript

jQuery实现动态生成年月日级联下拉列表示例

May 11 jQuery

jQuery中使用validate插件校验表单功能

May 24 jQuery

6种JavaScript继承方式及优缺点(小结)

Feb 06 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