首页
所有分类
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 Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
js中遍历Map对象的简单实例
Aug 08 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Nov 20 Javascript
js数据类型检测总结
Aug 05 Javascript
vue多次循环操作示例
Feb 08 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
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
MapReduce(1) MybatisPlus(2) JSON(10) css3 (2) Normal From(1) self(1) uniapp(4) SpringBoot(22) Qlabel(1) capture(1)
You might like
dedecms模板标签代码官方参考
2007/03/17 PHP
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
写js时遇到的一些小问题
2010/12/06 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
js实现分页功能
2017/05/24 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
express 项目分层实践详解
2018/12/10 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
新手该如何学python怎么学好python？
2008/10/07 Python
python实现数通设备端口监控示例
2014/04/02 Python
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
Under Armour西班牙官网：美国知名的高端功能性运动品牌
2018/12/12 全球购物
综合办公室主任职责
2013/12/16 职场文书
仓库组长岗位职责
2014/01/29 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
英语教学课后反思
2016/02/15 职场文书