一个刚完成的layout（拖动流畅，不受iframe影响）

时间：2021-05-25

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

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

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

QUOTE:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://mon/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
//及时调整页面内容的高度
setInterval(function(){
varwinH=(document.documentElement||document.body).clientHeight;
$("#tbl,#sideBar,#toggleBar,#main").css("height",winH);
$("td").each(function(){$(this).html()||$(this).html("")});
},100)
}
);

varbegin_x;
vardrag_flag=false;
document.onmousemove=mouseDrag
document.onmouseup=mouseDragEnd
//半透明的拖动条（模拟）
varalphaDiv="<divclass='div'id='alphaDiv'style='position:absolute;height:2000px;top:0;z-index:10001;filter:alpha(opacity=50);opacity:0.5;left:200px'></div>";
functionsetDrag(){
drag_flag=true;
begin_x=event.x;
//添加蒙板
createMask();
//添加半透明拖动条
$(alphaDiv).css("left",$("#toggleBar")[0].offsetLeft).appendTo("body");
}

//关键部分
functioncreateMask(){
//创建背景
varrootEl=document.documentElement||document.body;
vardocHeight=((rootEl.clientHeight>rootEl.scrollHeight)?rootEl.clientHeight:rootEl.scrollHeight)+"px";
vardocWidth=((rootEl.clientWidth>rootEl.scrollWidth)?rootEl.clientWidth:rootEl.scrollWidth)+"px";
varshieldStyle="position:absolute;top:0px;left:0px;width:"+docWidth+";height:"+docHeight+";background:#000;z-index:10000;filter:alpha(opacity=0);opacity:0";
$("<divid='shield'style=\""+shieldStyle+"\"></div>").appendTo("body");
}
//拖动时执行的函数
functionmouseDrag(){
if(drag_flag==true){
if(window.event.button==1){
varnow_x=event.x;
varvalue=parseInt($("#alphaDiv")[0].style.left)+now_x-begin_x;
$("#alphaDiv")[0].style.left=value+"px";
begin_x=now_x;
}
$("body").css("cursor","e-resize");//设定光标类型
}else{
try{
$("#shield").remove();
$("#sideBar")[0].style.pixelWidth=$("#alphaDiv")[0].style.left;
$("#alphaDiv").remove();
}catch(e){}
}
}

functionmouseDragEnd(){
//设置拖动条的位置
if(drag_flag==true){
//设定拖动条的位置（设定左侧的宽度）
$("#sideBar")[0].style.pixelWidth=parseInt($("#alphaDiv")[0].style.left);
$("#shield").remove();//删除蒙板
$("#alphaDiv").remove();//删除半透明拖动条
$("body").css("cursor","normal");//恢复光标类型
}
drag_flag=false;
}
</script>
</head>
<body>
<tableid="tbl"border="0"bordercollaspe="collapse"cellpadding="2"cellspacing="0"width="100%"height="100%">
<tr>
<tdwidth="1"><divid="sideBar"style="width:200px;"><divstyle="height:1200px">asdfasdf</div></div>
</td>
<tdwidth="1"onmousedown="setDrag()"id="toggleBar"></td>
<tdid="main">
<iframesrc="test.htm"id="frmMain"width="100%"height="100%"></iframe>
</td>
</tr>
</table>
</body>
</html>
自己的一点发现，一点心得，不知对大家有没有用处，只管拿出来献丑了！

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

相关文章