写了一个layout，拖动条连贯，内容区可为iframe_javascript技巧
程序员文章站
2022-05-07 20:05:50
...
写一个layout本来是一个很简单的事情，可这次的一个layout问题确让我为难了许久才做出来，下面来大概讲解一下问题的出现与解决过程。
注：本文代码皆基于jquery实现。
按照普通的方法写一个layout，一般是用一个table来实现，用中间的td拖动来控制左右两个td的大小，这个问题简单，很快就搞定。代码如下：
上面的这种写法也是大多数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
我们看一下完整的代码：
注：本文代码皆基于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 Documenttitle>
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="";
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">asdfasdfdiv>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.htm2 html xmlns="http://www.w3.org/1999/xhtml">
3 head>
4 meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 title>Untitled Documenttitle>
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="";
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">asdfasdfdiv>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>
上面的这种写法也是大多数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 Documenttitle>
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="";
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 $("
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{
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 Documenttitle>
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="";
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 $("
""+shieldStyle+"\">
").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{
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
相关文章
相关视频
下一篇： H5+JS二维动画制作的一个实例