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

时间：2021-05-25

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

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

按照普通的方法写一个layout，一般是用一个table来实现，用中间的td拖动来控制左右两个td的大小，这个问题简单，很快就搞定。代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://mon/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("&nbsp;")});
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'>&nbsp;</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>
算是自己的一点发现，一点心得吧，不知对大家有没有用处，只管拿出来献丑了！（首发于蓝色经典）

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章