将网页化成两个区域，左边区域是一个树结构，右边区域是一个iframe，点击左边区域时，右边区域加载页面。
实现功能：在两个区域间加一个可拖动条，拖动时改变左右两个区域的大小。
在Google上搜索slider，出来的结果都是关于滑动块的，最后搜索resize bar才找到正确的结果。
解决方案：jsfiddle的一个示例 http://jsfiddle.net/gaby/Bek9L/186/
以上示例能实现滑动效果，但是当鼠标移动到右侧的iframe时，鼠标移动时 $(document).mousemove 并不会响应，因为在iframe中已经不再是 $(document)了。
解决办法：在原始代码的基础上添加 $("#myframe").contents().mousemove 和 $("#myframe").contents().mouseup 并在up时将 $(document) 和 $("#myframe")的 mousemove事件都unbind。
改后的代码如下：<!DOCTYPE html>

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>ResizeBar by yhzhtk</title>

<meta name="url" content="http://yhzhtk.info/2014/01/16/js-resizebar.html"/>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.js'></script>

<style type='text/css'>

body,html{width:100%;height:100%;padding:0;margin:0;}

#main{

background-color: BurlyWood;

float: right;

position: absolute;

height:200px;

right: 0;

left:200px;

margin-top:10px;

}

#sidebar{

background-color: IndianRed;

margin-top:10px;

width:200px;

float: left;

position: absolute;

height:200px;

overflow-y: hidden;

}

#dragbar{

background-color:black;

height:100%;

float: right;

width: 3px;

cursor: col-resize;

}

#ghostbar{

width:3px;

background-color:#000;

opacity:0.5;

position:absolute;

cursor: col-resize;

z-index:999}

</style>

<script type='text/javascript'>//<![CDATA[

$(window).load(function() {

var i = 0;

var dragging = false;

var $main = $('#main')

$('#dragbar').mousedown(function(e) {

e.preventDefault();

dragging = true;

var ghostbar = $('<div>', {

id: 'ghostbar',

css: {

height: $main.outerHeight(),

top: $main.offset().top,

left: $main.offset().left

}

}).appendTo('body');

$('#mousestatus').html("mousedown" + i++);

$(document).mousemove(function(e) {

ghostbar.css("left", e.pageX + 2);

});

// 此处新增，当鼠标在iframe中时也会移动

$("#myiframe").contents().mousemove(function(e) {

ghostbar.css("left", e.pageX + $main.offset().left + $("#dragbar").width() * 2);

});

});

$(document).mouseup(function(e) {

$('#clickevent').html('in another mouseUp event' + i++);

if (dragging) {

$('#sidebar').css("width", e.pageX + 2);

$main.css("left", e.pageX + 2);

$('#ghostbar').remove();

$(document).unbind('mousemove');

// 此处新增，解绑时将myiframe也接触

$("#myiframe").contents().unbind('mousemove');

dragging = false;

}

});

// 新增 myiframe的mouseup事件

$("#myiframe").contents().mouseup(function(e) {

if (dragging) {

$('#sidebar').css("width", e.pageX + $main.offset().left + $("#dragbar").width());

$main.css("left", e.pageX + $main.offset().left + $("#dragbar").width());

$('#ghostbar').remove();

$(document).unbind('mousemove');

// 此处新增，解绑时将myiframe也接触

$("#myiframe").contents().unbind('mousemove');

dragging = false;

}

});

}); //]]>

</script>

</head>

<body>

<div id="sidebar">

<span id="position"></span>

<div id="dragbar"></div>

sidebar

</div>

<div id="main">

<iframe id="myiframe">main</iframe>

</div>

</body>

</html>

这样即使有iframe，鼠标移动时也能捕捉到事件，完成想要的拖动改变区域大小的效果。

JS 实现 ResizeBar，可拖动改变两个区域(带iframe)大小的更多相关文章

  1. 鼠标拖动改变DIV等网页元素的大小的最佳实践

    1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" la ...

  2. vuejs中拖动改变元素宽度实现宽度自适应大小

    需求效果: 原理:拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(left),来实现拖动之后的不同宽度的计算:当拖动分隔线1时,计算元素框left和mid:当拖 ...

  3. jQuery实现鼠标拖动改变Div高度

    最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...

  4. legend2---开发日志6（后端和前端如何相互配合(比如php，js，元素状态和数据改变)）

    legend2---开发日志6(后端和前端如何相互配合(比如php,js,元素状态和数据改变)) 一.总结 一句话总结:php给元素初始状态,js根据这个状态做初始化和后续变化,使用vue真的很方便( ...

  5. 解决Js中的resize事件执行两次的方法

    问题: 页面自适应的时候需要用到js的resize事件,但在执行过程中发现只要触发resize事件就会执行2次 原生js: window.onresize = function(){ console. ...

  6. js字符串长度计算(一个汉字==两个字符)和字符串截取

    js字符串长度计算(一个汉字==两个字符)和字符串截取 String.prototype.realLength = function() { return this.replace(/[^\x00-\ ...

  7. Js验证 ：只能输入数字和小数点 验证是否是数字 js取float型小数点后两位

    JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'') ...

  8. js只允许输入数字和两位小数

    一.js只允许输入数字和两位小数 //只允许输入数字和两位小数 function clearNoNum(obj) { obj.value = obj.value.replace(/[^\d.]/g, ...

  9. js实现页面跳转的两种方式

      CreateTime--2017年8月24日08:13:52Author:Marydon js实现页面跳转的两种方式 方式一: window.location.href = url 说明:我们常用 ...

随机推荐

  1. Python实现ssh批量登录并执行命令

    局域网内有一百多台电脑,全部都是linux操作系统,所有电脑配置相同,系统完全相同(包括用户名和密码),ip地址是自动分配的.现在有个任务是在这些电脑上执行某些命令,者说进行某些操作,比如安装某些软件 ...

  2. 关于LINUX权限-bash: ./startup.sh: Permission denied

    关于LINUX权限-bash: ./startup.sh: Permission denied <script type="text/javascript"></ ...

  3. vim快捷键笔记【原创】

    Vim zR  全部展开 zM全部合并 vim  快捷键 shift   +  i      (‘I’)    进行编辑 shift   +  4     (‘$’)    跳到行尾 shift   ...

  4. C# Server.MapPath()

     ./当前目录 /网站主目录../上层目录~/网站虚拟目录 如果当前的网站目录为E:\wwwroot   应用程序虚拟目录为E:\wwwroot\company 浏览的页面路径为E:\wwwroot\ ...

  5. tomcat7 1000并发量配置 tomcat7配置优化

    修改tomcat/conf/server.xml配置文件. <Executor name="tomcatThreadPool" namePrefix="catali ...

  6. Perl date time

    use Time::HiRes qw(time);use POSIX qw(strftime); my $t = time;my $date = strftime "%Y%m%d %H:%M ...

  7. 数据库系统中事务的ACID原则

    事务的原子性.一致性.独立性及持久性 事务的原子性是指一个事务要么全部执行,要么不执行.也就是说一个事务不可能只执行了一半就停止了.比如你从取款机取钱,这个事务可以分成两个步骤:1划卡,2出钱.不可能 ...

  8. hdu4003Find Metal Mineral(树形DP）

    4003 思维啊 dp[i][j]表示当前I节点停留了j个机器人 那么它与父亲的关系就有了 那条边就走了j遍 dp[i][j] = min(dp[i][j],dp[child][g]+dp[i][j- ...

  9. 投影纹理映射（Projective Texture Mapping）

    摘抄“GPU Programming And Cg Language Primer 1rd Edition” 中文名“GPU编程与CG语言之阳春白雪下里巴人”  投影纹理映射( Projective ...

  10. C#操作文件

    c# 操作txt文件 # 操作txt文件 c#创建文本 private const string FILE_NAME = "ErroLog.txt"; public static ...