作家
登录

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

作者: 来源:www.28hudong.com 2013-03-30 03:19:20 阅读 我要评论

写一个layout本来是一个很简单的事情,可这次的一个layout问题确让我为难了许久才做出来,下面来大概讲解一下问题的出现与解决过程。注:本文代码皆基于jquery实现。按照普通的方法写一个layout,一般是用一个table来实现,用中间的td拖动来控制左右两个td的大小,这个问题简单,很快就搞定。代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2 <html xmlns="http://www.w3.org/1999/xhtml">3 <head>4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5 <title>Untitled Document</title>6 <style type="text/css">7 *{margin:0px;padding:0px}8 html{overflow:hidden}9 #sideBar{width:200px;height:100%;overflow:auto}10 #toggleBar,.div{11 width:7px;height:100%;12 overflow:hidden;background:#eee;13 cursor:e-resize;border-left:1px solid #ccc;border-right:1px solid #ccc;14 }15 td{display:block;overflow:auto;word-break:break-all;}16 </style>17 <script type="text/javascript" src="../Common/jquery.gif"></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(" ")});25 },100)26 }27 );28 29 var begin_x; 30 var drag_flag = false; 31 document.onmousemove = mouseDrag32 document.onmouseup = mouseDragEnd33 //半透明拖动条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'> </div>";35 function setDrag(){36 drag_flag=true; 37 begin_x=event.x;38 //添加半透明拖动条39 $(alphaDiv).css("left",$("#toggleBar")[0].offsetLeft).appendTo("body");40 }41 42 //拖动时执行的函数43 function mouseDrag(){44 if(drag_flag==true){45 if (window.event.button==1){46 var now_x=event.x;47 var value=parseInt($("#alphaDiv")[0].style.left)+now_x-begin_x;48 $("#alphaDiv")[0].style.left=value+"px";49 begin_x=now_x;50 } 51 $("body").css("cursor","e-resize"); //设定光标类型52 }else{53 try{54 $("#sideBar")[0].style.pixelWidth=$("#alphaDiv")[0].style.left;55 $("#alphaDiv").remove();56 }catch(e){}57 }58 }59 60 function mouseDragEnd(){61 //设置拖动条的位置62 if(drag_flag==true){63 //设定拖动条的位置(设定左侧的宽度)64 $("#sideBar")[0].style.pixelWidth=parseInt($("#alphaDiv")[0].style.left);65 $("#alphaDiv").remove(); //删除半透明拖动条66 $("body").css("cursor","normal"); //恢复光标类型67 }68 drag_flag=false;69 }70 </script>71 </head>72 <body>73 <table id="tbl" border="0" bordercollaspe="collapse" cellpadding="2" cellspacing="0" width="100%" height="100%">74 <tr>75 <td width="1"><div id="sideBar" style="width:200px;"><div style="height:1200px">asdfasdf</div></div>76 </td>77 <td width="1" onmousedown="setDrag()" id="toggleBar"></td>78 <td id="main">79 right Panel80 </td>81 </tr>82 </table>83 </body>84 </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我们看一下完整的代码: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2 <html xmlns="http://www.w3.org/1999/xhtml">3 <head>4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5 <title>Untitled Document</title>6 <style type="text/css">7 *{margin:0px;padding:0px}8 html{overflow:hidden}9 #sideBar{width:200px;height:100%;overflow:auto}10 #toggleBar,.div{11 width:7px;height:100%;12 overflow:hidden;background:#eee;13 cursor:e-resize;border-left:1px solid #ccc;border-right:1px solid #ccc;14 }15 td{display:block;overflow:auto;word-break:break-all;}16 </style>17 <script type="text/javascript" src="../Common/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(" ")});25 },100)26 }27 );28 29 var begin_x; 30 var drag_flag = false; 31 document.onmousemove = mouseDrag32 document.onmouseup = mouseDragEnd33 //半透明的拖动条(模拟)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'> </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>算是自己的一点发现,一点心得吧,不知对大家有没有用处,只管拿出来献丑了!(首发于蓝色经典)

  推荐阅读

  js实现运行代码需要刷新的解决方法

现在大多网站都有“运行代码”的功能,搜索吧也很早就实现了这个功能,但最近在做一个项目时,发现有些需要刷新才能看到结果,自己摸索了下,其实解决方法很简单,看如下代码: function runCode(cod1) { cod>>>详细阅读


本文标题:写了一个layout,拖动条连贯,内容区可为iframe

地址:http://www.17bianji.com/kaifa2/JS/30150.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)