欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

layout(拖动流畅,不受iframe影响) 博客分类: JavaScript CSSHTMLXHTML.net 

程序员文章站 2024-03-07 11:47:09
...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Untitled Document</title> 
<style type="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:1px solid #ccc;border-right:1px solid #ccc; 
} 
td{display:block;overflow:auto;word-break:break-all;} 
</style> 
<script type="text/javascript" src="../Common/jquery.js"></script> 
<script type="text/javascript"> 
$(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> 
<table id="tbl" border="0" bordercollaspe="collapse" cellpadding="2" cellspacing="0" width="100%" height="100%"> 
<tr> 
<td width="1"><div id="sideBar" style="width:200px;"><div style="height:1200px">asdfasdf</div></div> 
</td> 
<td width="1" onmousedown="setDrag()" id="toggleBar"></td> 
<td id="main"> 
<iframe src="test.htm" id="frmMain" width="100%" height="100%"></iframe> 
</td> 
</tr> 
</table> 
</body> 
</html> 

这时我们就发现问题了,只能向左边拖动,但不能像右边拖动,这是为什们呢?
经过检查,发现原来当鼠标移动到iframe上就无法捕获鼠标的位置了,event对象也不存在。得不到鼠标的位置我们的拖动当然会出现问题了。

这个问题着实让我郁闷了许久,然后测试其他的一些layout(对iframe进行了处理)发现凡是使用iframe的都有一个缺陷,当鼠标拖动速度很快的时候,拉动条速度跟不上(当然这些并没有那个模拟的半透明的拖动条,直接拖动真实的拖动条的),感觉就是很不流畅很不同步。
我们看一下直接拖动真是滚动条的情况
演示地址:http://www.ajaxbbs.net/test/layout/JqSplit/iframeRightNoAlpha.htm我们慢速度拖动还是可以向右移动的,但一但速度稍快便不能拖动了。

对于这个问题始终没有想到好的解决办法,就在我悲伤的即将放弃时,看到前几天写的一个模拟弹出框,因为当时测试弹出框应该要遮住包括iframe在内的select。所以页面中使用了ifame。突然发现一个索引很高的层能够遮住iframe,突然间就有了灵感,马上实验。

思路如下:拖动拉条时在页面添加一个索引很大的层(如10000),将其透明度设为0(完全透明),这样鼠标就不会移动到iframe中,但iframe仍然存在可以看到。当拖动结束(onmouseup)时去掉这个层即可,这样就实现了比较完美的拖动。