一个刚完成的layout(拖动流畅,不受iframe影响)
一个刚完成的layout(拖动流畅,不受iframe影响)
发布时间:2016-12-30 来源:查字典编辑
摘要:写一个layout本来是一个很简单的事情,可这次的一个layout问题确让我为难了许久才做出来,下面来大概讲解一下问题的出现与解决过程。注:...

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

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

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

QUOTE:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<title>UntitledDocument</title>

<styletype="text/css">

*{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;}

</style>

<scripttype="text/javascript"src="../Common/jquery.gif"></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;

//添加半透明拖动条

$(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;

}

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

rightPanel

</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:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<title>UntitledDocument</title>

<styletype="text/css">

*{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;}

</style>

<scripttype="text/javascript"src="../Common/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>

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

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类