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

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

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

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

　　QUOTE:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<title>Untitled Document</title>

　　*{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:1px solid #ccc;border-right:1px solid #ccc;

　　}

　　td{display:block;overflow:auto;word-break:break-all;}

　　</style>

　　$(document).ready(function(){

　　//及时调整页面内容的高度

　　setInterval(function(){

　　var winH=(document.documentElement||document.body).clientHeight;

　　$("#tbl,#sideBar,#toggleBar,#main").css("height",winH);

　　$("td").each(function(){$(this).html()||$(this).html(" ")});

　　},100)

　　}

　　);

　　var begin_x;

　　var drag_flag = false;

　　document.onmousemove = mouseDrag

　　document.onmouseup = mouseDragEnd

　　//半透明拖动条

　　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>";

　　function setDrag(){

　　drag_flag=true;

　　begin_x=event.x;

　　//添加半透明拖动条

　　$(alphaDiv).css("left",$("#toggleBar")[0].offsetLeft).appendTo("body");

　　}

　　//拖动时执行的函数

　　function mouseDrag(){

　　if(drag_flag==true){

　　if (window.event.button==1){

　　var now_x=event.x;

　　var value=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){}

　　}

　　function mouseDragEnd(){

　　//设置拖动条的位置

　　if(drag_flag==true){

　　//设定拖动条的位置（设定左侧的宽度）

　　$("#sideBar")[0].style.pixelWidth=parseInt($("#alphaDiv")[0].style.left);

　　$("#alphaDiv").remove(); //删除半透明拖动条

　　$("body").css("cursor","normal"); //恢复光标类型

　　}

　　drag_flag=false;

　　}

　　</script>

　　</head>

　　<body>

　　<tr>

　　<td width="1"><div id="sideBar" style="width:200px;"><div style="height:1200px">asdfasdf</div></div>

　　</td>

　　right Panel

　　</td>

　　</tr>

　　</table>

　　</body>

　　</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我们看一下完整的代码：

　　QUOTE:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<title>Untitled Document</title>

　　*{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:1px solid #ccc;border-right:1px solid #ccc;

　　}

　　td{display:block;overflow:auto;word-break:break-all;}

　　</style>

　　$(document).ready(function(){

　　//及时调整页面内容的高度

　　setInterval(function(){

　　var winH=(document.documentElement||document.body).clientHeight;

　　$("#tbl,#sideBar,#toggleBar,#main").css("height",winH);

　　$("td").each(function(){$(this).html()||$(this).html(" ")});

　　},100)

　　}

　　);

　　var begin_x;

　　var drag_flag = false;

　　document.onmousemove = mouseDrag

　　document.onmouseup = mouseDragEnd

　　//半透明的拖动条（模拟）

　　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>";

　　function setDrag(){

　　drag_flag=true;

　　begin_x=event.x;

　　//添加蒙板

　　createMask();

　　//添加半透明拖动条

　　$(alphaDiv).css("left",$("#toggleBar")[0].offsetLeft).appendTo("body");

　　}

　　//关键部分

　　function createMask(){

　　//创建背景

　　var rootEl=document.documentElement||document.body;

　　var docHeight=((rootEl.clientHeight>rootEl.scrollHeight)?rootEl.clientHeight:rootEl.scrollHeight)+"px";

　　var docWidth=((rootEl.clientWidth>rootEl.scrollWidth)?rootEl.clientWidth:rootEl.scrollWidth)+"px";

　　var shieldStyle="position:absolute;top:0px;left:0px;width:"+docWidth+";height:"+docHeight+";background:#000;z-index:10000;filter:alpha(opacity=0);opacity:0";

　　$("<div id='shield' style=\""+shieldStyle+"\"></div>").appendTo("body");

　　}

　　//拖动时执行的函数

　　function mouseDrag(){

　　if(drag_flag==true){

　　if (window.event.button==1){

　　var now_x=event.x;

　　var value=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){}

　　}

　　function mouseDragEnd(){

　　//设置拖动条的位置

　　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>

　　<tr>

　　<td width="1"><div id="sideBar" style="width:200px;"><div style="height:1200px">asdfasdf</div></div>

　　</td>

　　</td>

　　</tr>

　　</table>

　　</body>

　　</html>

　　自己的一点发现，一点心得，不知对大家有没有用处，只管拿出来献丑了！

教程首页更多教程