一个刚完成的layout（拖动流畅，不受iframe影响）
发布时间：2007-08-17 作者： 来源：转载
写一个layout本来是一个很简单的事情，可这次的一个layout问题确让我为难了许久才做出来，下面来大概讲解一下问题的出现与解决过程。注：本文代码皆基于jquery实现。按照普通的方法写一个layout，一般是用一个table来实现，用中间的td拖动来控制左右两个td的
写一个layout本来是一个很简单的事情，可这次的一个layout问题确让我为难了许久才做出来，下面来大概讲解一下问题的出现与解决过程。
注：本文代码皆基于jquery实现。
按照普通的方法写一个layout，一般是用一个table来实现，用中间的td拖动来控制左右两个td的大小，这个问题简单，很快就搞定。代码如下：
QUOTE:
UntitledDocument
*{margin:0px;padding:0px}
html{overflow:hidden}
#sideBar{width:200px;height:100%;overflow:auto}
#toggleBar,.div{
width:7px;height:100%;
overflow:hidden;background:#eee;
cursor:e-resize;border-left:1pxsolid#ccc;border-right:1pxsolid#ccc;
}
td{display:block;overflow:auto;word-break:break-all;}
$(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="
";
functionsetDrag(){
drag_flag=true;
begin_x=event.x;
//添加半透明拖动条
$(alphaDiv).css("left",$("#toggleBar")[0].offsetLeft).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{
$("#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);
$("#alphaDiv").remove();//删除半透明拖动条
$("body").css("cursor","normal");//恢复光标类型
}
drag_flag=false;
}
asdfasdf
rightPanel
