首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

一个刚完成的layout（拖动流畅，不受iframe影响）

Posted in Javascript onAugust 17, 2007

写一个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>
自己的一点发现，一点心得，不知对大家有没有用处，只管拿出来献丑了！

一个刚完成的layout（拖动流畅，不受iframe影响）

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
tbody元素支持嵌套的注意方法
Mar 24 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
Node.js与MySQL交互操作及其注意事项
Oct 05 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 Javascript
wordpress之js库集合研究介绍
Aug 17 #Javascript
FormValid0.5版本发布，带ajax自定义验证例子
Aug 17 #Javascript
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 #Javascript
如何用js控制css中的float的代码
Aug 16 #Javascript
javascript 函数式编程
Aug 16 #Javascript
总结AJAX相关JS代码片段和浏览器模型
Aug 15 #Javascript
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
Aug 15 #Javascript
PHILIPS(3) ICF-SW55(1) 飞利浦(2) D1835(1) 德劲1103(3) ICF-SW7600GR(1) 德生9700DX(1) L4X25T(1) 德生PL330(2) Panasonic(1)
You might like
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
php无限极分类实现的两种解决方法
2013/04/28 PHP
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
js判断节假日实例代码
2017/12/27 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
简单的React SSR服务器渲染实现
2018/12/11 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
python自然语言编码转换模块codecs介绍
2015/04/08 Python
Python中实现参数类型检查的简单方法
2015/04/21 Python
Python优先队列实现方法示例
2017/09/21 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
Columbia Sportswear法国官网：全球户外品牌
2020/09/25 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
开朗女孩的自我评价
2014/02/10 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
倡议书格式
2014/08/30 职场文书
升职自我推荐信范文
2015/03/25 职场文书
叶问观后感
2015/06/15 职场文书
超市店长竞聘书
2015/09/15 职场文书