一个刚完成的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">
<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.gif"></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;
//添加半透明拖动条
$(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>
<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">
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">
<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>
自己的一点发现，一点心得，不知对大家有没有用处，只管拿出来献丑了！
相关推荐
-
javascript之可拖动的iframe效果代码
// HISTORY// ------------------------------------------------------------------// Jan 23, 2004: Fixed problems which caused the script not to work in// some framed situations. Improved browser support.// Added easier "addH
-
主页面中的两个iframe实现鼠标拖动改变其大小
复制代码 代码如下: <%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm4.aspx.vb" Inherits="HIG_Receipt.WebForm4"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html
-
写了一个layout，拖动条连贯，内容区可为iframe
写一个layout本来是一个很简单的事情,可这次的一个layout问题确让我为难了许久才做出来,下面来大概讲解一下问题的出现与解决过程. 注:本文代码皆基于jquery实现. 按照普通的方法写一个layout,一般是用一个table来实现,用中间的td拖动来控制左右两个td的大小,这个问题简单,很快就搞定.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
-
一个刚完成的layout（拖动流畅，不受iframe影响）
写一个layout本来是一个很简单的事情,可这次的一个layout问题确让我为难了许久才做出来,下面来大概讲解一下问题的出现与解决过程. 注:本文代码皆基于jquery实现. 按照普通的方法写一个layout,一般是用一个table来实现,用中间的td拖动来控制左右两个td的大小,这个问题简单,很快就搞定.代码如下: QUOTE: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/
-
On having layout
译者注:一篇很好的文章,很久以前在blog上就推荐过,这两天断断续续花了点时间翻译了一下,推荐读读.英文原文在此. 文中所有的 layout 这个单词都未作翻译,一来本身这个单词意思就比较多,翻成啥都觉得别扭,二来它也是专有的属性,所以就意会一下吧.水平有限,很多地方都是模模糊糊地意译,发现错误欢迎留言指出. 引用一段来自Dean Edwards的评价: I recommend that every CSS designer and DOM scripter read this. Underst
-
转载：On having layout
译者注:一篇很好的文章,很久以前在blog上就推荐过,这两天断断续续花了点时间翻译了一下,推荐读读.英文原文在此. 文中所有的 layout 这个单词都未作翻译,一来本身这个单词意思就比较多,翻成啥都觉得别扭,二来它也是专有的属性,所以就意会一下吧.水平有限,很多地方都是模模糊糊地意译,发现错误欢迎留言指出. 引用一段来自Dean Edwards的评价: I recommend that every CSS designer and DOM scripter read this. Underst
-
基于vue实现一个禅道主页拖拽效果
效果图如下所示: 源码地址 bb两句 最近在做一个基于vue的后台管理项目.平时项目进度统计就在上禅道上进行.so~ 然后领导就感觉这个拖拽效果还行,能不能加到咱们项目里面. 既然领导发话,那就开干.. 所有技术:vue + vuedraggable 拖动的实现基于 vuedraggable 的插件开发. 主页为两栏流式布局,每一个组件可以在上下拖动,也可以左右拖动. 基本步骤 布局 这块布局为最为普通的两栏布局,这里采用flex布局.左边自适应,右边为固定宽. .layout-containe
-
SeekBar拖动条的应用实例
本文实例为大家分享了SeekBar拖动条的应用代码,供大家参考,具体内容如下 目标效果 在该页面中放一个拖动条的状态提示信息,一个拖动条以及一个显示拖动条值的信息.当我们点击拖动条时,在状态栏显示:正在拖动,并显示此时拖动条的值:当停止点击拖动条的时候,状态显示:停止拖动. 目标界面如下所示: 页面布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&quo
-
ios开发：一个音乐播放器的设计与实现案例
这个Demo,关于歌曲播放的主要功能都实现了的.下一曲.上一曲,暂停,根据歌曲的播放进度动态滚动歌词,将当前正在播放的歌词放大显示,拖动进度条,歌曲跟着变化,并且使用Time Profiler进行了优化,还使用XCTest对几个主要的类进行了单元测试. 已经经过真机调试,在真机上可以后台播放音乐,并且锁屏时,显示一些主要的歌曲信息. 根据歌曲的播放来显示对应歌词的.用UITableView来显示歌词,可以手动滚动界面查看后面或者前面的歌词. 并且,当拖动进度条,歌词也会随之变化,下一曲.上一曲依
-
微信小程序新增的拖动组件movable-view使用教程
前言 小程序在520节日前夜,让程序员们又躁动了一把,更新了一些很诱人的功能,如内容转发API,iBeacon API,振动API,屏幕亮度调节API等,也增强了地图组件的功能. 此次的更新中,也新增了一个UI组件,它就是视图组件movable-view,它需要配合movable-area来一起使用.简单来说,它就是一个支持在指定区域内可以拖动内容的容器. 我们来看一个简单的示例: <movable-area style="height: 200px;width: 200px;backgr
-
javascript 拖动表格行实现代码
行拖动的实现思路非常简单,选中一行,往上拖就与上面的行交换位置,往下拖就与下面的行交换位置.问题是如何得到交换行.我见过一个非常详细的教程,它会把表格里的每一行的高度与Y坐标计算出来,换言之,都时是比较e.pageX是否在[rowTop,rowBottom]区间之内.但这也带来第二个问题,有多少行就有多个这样的区间.于是解法就变成取事件源对象,然后再往上取其父对象,如果其父对象是TR元素,就取其[rowTop,rowBottom]区间....思路非常直接,同时也客观做出一个限制--不能使用代理拖
-
在ASP.NET 2.0中操作数据之一：创建一个数据访问层
导言 作为web开发人员,我们的生活围绕着数据操作.我们建立数据库来存储数据,写编码来访问和修改数据,设计网页来采集和汇总数据.本文是研究在ASP.NET 2.0中实现这些常见的数据访问模式之技术的长篇系列教程的第一篇.我们将从创建一个软件框架开始,这个框架的组成部分包括一个使用强类型的DataSet的数据访问层(DAL),一个实施用户定义的业务规则的业务逻辑层(BLL),以及一个由共享页面布局的ASP.NET网页组成的表现层.在打下这个后端的基础工作之后,我们将开始转向报表,示范如何显示,汇总