새로 완성된 레이아웃(부드러운 드래그, iframe의 영향을 받지 않음)_javascript 기술

레이아웃을 작성하는 것은 원래 매우 간단한 일이지만, 이번에 레이아웃 문제로 인해 만들기까지 정말 오랫동안 당황스러웠습니다. 문제의 출현과 해결 과정을 간략하게 설명하겠습니다.

참고: 이 기사의 코드는 모두 jquery를 기반으로 합니다.

보통 테이블을 사용하여 일반적인 방법에 따라 레이아웃을 작성하고 가운데 TD를 사용하여 드래그하여 왼쪽 및 오른쪽 TD의 크기를 제어합니다. 이 문제는 간단하고 빠르게 해결할 수 있습니다. 코드는 다음과 같습니다.

인용문:
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

 
 
                                                                        
        ~ ~           ​solid #ccc ;border-right:1px solid #ccc 🎜> 

 
 
 
            
                
                
                
            
        

asdfasdf

right Panel

                                                                            1200px">asdfasdf <script></script> <script> <BR> $(document).ready(function(){ <BR> //及时调整页面内容的高度 <BR> setInterval(function(){ <BR> var winH=(document.documentElement||document.body).clientHeight; <BR> $("#tbl,#sideBar,#toggleBar,#main").css("height",winH); <BR> $("td").each(function(){$(this).html()||$(this).html(" ")}); <BR> },100) <BR> } <BR> ); <br><br> var begin_x; <BR> var drag_flag = false; <BR> document.onmousemove = mouseDrag <BR> document.onmouseup = mouseDragEnd <BR> //半透明拖动条 <BR> 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'> "; <BR> function setDrag(){ <BR> drag_flag=true; <BR> begin_x=event.x; <BR> //添加半透明拖动条 <BR> $(alphaDiv).css("left",$("#toggleBar")[0].offsetLeft).appendTo("body"); <BR> } <br><br> //拖动时执行的函数 <BR> function mouseDrag(){ <BR> if(drag_flag==true){ <BR> if (window.event.button==1){ <BR> var now_x=event.x; <BR> var value=parseInt($("#alphaDiv")[0].style.left)+now_x-begin_x; <BR> $("#alphaDiv")[0].style.left=value+"px"; <BR> begin_x=now_x; <BR> } <BR> $("body").css("cursor","e-resize"); //设定光标类型 <BR> }else{ <BR> try{ <BR> $("#sideBar")[0].style.pixelWidth=$("#alphaDiv")[0].style.left; <BR> $("#alphaDiv").remove(); <BR> }catch(e){} <BR> } <BR> } <br><br> function mouseDragEnd(){ <BR> //设置拖动条的位置 <BR> if(drag_flag==true){ <BR> //设定拖动条的位置（设定左侧的宽度） <BR> $("#sideBar")[0].style.pixelWidth=parseInt($("#alphaDiv")[0].style.left); <BR> $("#alphaDiv").remove(); //删除半透明拖动条 <BR> $("body").css("cursor","normal"); //恢复光标类型 <BR> } <BR> drag_flag=false; <BR> } <BR> </script> <script></script> 오른쪽 패널 <script> <BR> $(document).ready(function(){ <BR> //及时调整页面内容的高度 <BR> setInterval(function(){ <BR> var winH=(document.documentElement||document.body).clientHeight; <BR> $("#tbl,#sideBar,#toggleBar,#main").css("height",winH); <BR> $("td").each(function(){$(this).html()||$(this).html(" ")}); <BR> },100) <BR> } <BR> ); <br><br> var begin_x; <BR> var drag_flag = false; <BR> document.onmousemove = mouseDrag <BR> document.onmouseup = mouseDragEnd <BR> //半透明的拖动条（模拟） <BR> 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'> "; <BR> function setDrag(){ <BR> drag_flag=true; <BR> begin_x=event.x; <BR> //添加蒙板 <BR> createMask(); <BR> //添加半透明拖动条 <BR> $(alphaDiv).css("left",$("#toggleBar")[0].offsetLeft).appendTo("body"); <BR> } <br><br> //关键部分 <BR> function createMask(){ <BR> //创建背景 <BR> var rootEl=document.documentElement||document.body; <BR> var docHeight=((rootEl.clientHeight>rootEl.scrollHeight)?rootEl.clientHeight:rootEl.scrollHeight)+"px"; <BR> var docWidth=((rootEl.clientWidth>rootEl.scrollWidth)?rootEl.clientWidth:rootEl.scrollWidth)+"px"; <BR> var shieldStyle="position:absolute;top:0px;left:0px;width:"+docWidth+";height:"+docHeight+";background:#000;z-index:10000;filter:alpha(opacity=0);opacity:0"; <BR> $("<div id='shield' style=\""+shieldStyle+"\">").appendTo("body"); <BR> } <BR> //拖动时执行的函数 <BR> function mouseDrag(){ <BR> if(drag_flag==true){ <BR> if (window.event.button==1){ <BR> var now_x=event.x; <BR> var value=parseInt($("#alphaDiv")[0].style.left)+now_x-begin_x; <BR> $("#alphaDiv")[0].style.left=value+"px"; <BR> begin_x=now_x; <BR> } <BR> $("body").css("cursor","e-resize"); //设定光标类型 <BR> }else{ <BR> try{ <BR> $("#shield").remove(); <BR> $("#sideBar")[0].style.pixelWidth=$("#alphaDiv")[0].style.left; <BR> $("#alphaDiv").remove(); <BR> }catch(e){} <BR> } <BR> } <br><br> function mouseDragEnd(){ <BR> //设置拖动条的位置 <BR> if(drag_flag==true){ <BR> //设定拖动条的位置（设定左侧的宽度） <BR> $("#sideBar")[0].style.pixelWidth=parseInt($("#alphaDiv")[0].style.left); <BR> $("#shield").remove(); //删除蒙板 <BR> $("#alphaDiv").remove(); //删除半透明拖动条 <BR> $("body").css("cursor","normal"); //恢复光标类型 <BR> } <BR> drag_flag=false; <BR> } <BR> </script>
    

演示地址：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:
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    
        
        
    
    <script></script>
    <script> <BR> $(document).ready(function(){ <BR> //及时调整页面内容的高度 <BR> setInterval(function(){ <BR> var winH=(document.documentElement||document.body).clientHeight; <BR> $("#tbl,#sideBar,#toggleBar,#main").css("height",winH); <BR> $("td").each(function(){$(this).html()||$(this).html(" ")}); <BR> },100) <BR> } <BR> ); <br><br> var begin_x; <BR> var drag_flag = false; <BR> document.onmousemove = mouseDrag <BR> document.onmouseup = mouseDragEnd <BR> //半透明的拖动条（模拟） <BR> 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'> "; <BR> function setDrag(){ <BR> drag_flag=true; <BR> begin_x=event.x; <BR> //添加蒙板 <BR> createMask(); <BR> //添加半透明拖动条 <BR> $(alphaDiv).css("left",$("#toggleBar")[0].offsetLeft).appendTo("body"); <BR> } <br><br> //关键部分 <BR> function createMask(){ <BR> //创建背景 <BR> var rootEl=document.documentElement||document.body; <BR> var docHeight=((rootEl.clientHeight>rootEl.scrollHeight)?rootEl.clientHeight:rootEl.scrollHeight)+"px"; <BR> var docWidth=((rootEl.clientWidth>rootEl.scrollWidth)?rootEl.clientWidth:rootEl.scrollWidth)+"px"; <BR> var shieldStyle="position:absolute;top:0px;left:0px;width:"+docWidth+";height:"+docHeight+";background:#000;z-index:10000;filter:alpha(opacity=0);opacity:0"; <BR> $("<div id='shield' style=\""+shieldStyle+"\">").appendTo("body"); <BR> } <BR> //拖动时执行的函数 <BR> function mouseDrag(){ <BR> if(drag_flag==true){ <BR> if (window.event.button==1){ <BR> var now_x=event.x; <BR> var value=parseInt($("#alphaDiv")[0].style.left)+now_x-begin_x; <BR> $("#alphaDiv")[0].style.left=value+"px"; <BR> begin_x=now_x; <BR> } <BR> $("body").css("cursor","e-resize"); //设定光标类型 <BR> }else{ <BR> try{ <BR> $("#shield").remove(); <BR> $("#sideBar")[0].style.pixelWidth=$("#alphaDiv")[0].style.left; <BR> $("#alphaDiv").remove(); <BR> }catch(e){} <BR> } <BR> } <br><br> function mouseDragEnd(){ <BR> //设置拖动条的位置 <BR> if(drag_flag==true){ <BR> //设定拖动条的位置（设定左侧的宽度） <BR> $("#sideBar")[0].style.pixelWidth=parseInt($("#alphaDiv")[0].style.left); <BR> $("#shield").remove(); //删除蒙板 <BR> $("#alphaDiv").remove(); //删除半透明拖动条 <BR> $("body").css("cursor","normal"); //恢复光标类型 <BR> } <BR> drag_flag=false; <BR> } <BR> </script>
    
    
        
            
                


나는 약간의 발견과 약간의 경험이 모두에게 도움이 될지 모르겠어서 부끄러움을 보여드리고자 올립니다!

asdfasdf

🎜>