首页
所有分类
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 相关文章推荐
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
jquery 打开窗口返回值实现代码
Mar 04 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
js获取字符串字节数方法小结
Jun 09 Javascript
js中 javascript:void(0) 用法详解
Aug 11 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
angularjs中的$eval方法详解
Apr 24 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 Javascript
vue+canvas实现拼图小游戏
Sep 18 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
svg(1) Sentry(1) 蓝屏(1) Sunmao(1) 鸿蒙(2) 声卡驱动(1) sout(1) win7(2) 滚动条(1) 输入法(2)
You might like
文件上传类
2006/10/09 PHP
PHP4实际应用经验篇(4)
2006/10/09 PHP
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
tp5 实现列表数据根据状态排序
2019/10/18 PHP
YII2框架中使用RBAC对模块，控制器，方法的权限控制及规则的使用示例
2020/03/18 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
js微信分享实现代码
2020/10/11 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
简单介绍Ruby中的CGI编程
2015/04/10 Python
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
python 中的int()函数怎么用
2017/10/17 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
python-str,list,set间的转换实例
2018/06/27 Python
关于python字符串方法分类详解
2019/08/20 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
Django数据库操作之save与update的使用
2020/04/01 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
Julep官网：美容产品和指甲油
2017/02/25 全球购物
元旦活动感言
2014/03/08 职场文书
求职信范文大全
2014/05/26 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
介绍信范文大全
2015/05/07 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL