将网页化成两个区域，左边区域是一个树结构，右边区域是一个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. MyBatis学习总结_03_优化MyBatis配置文件中的配置

    一.连接数据库的配置单独放在一个properties文件中 之前,我们是直接将数据库的连接配置信息写在了MyBatis的conf.xml文件中,如下: 1 <?xml version=" ...

  2. Centos上的屏幕保护

    关闭Centos上的屏幕保护:setterm -blank 0 设置Centos上的屏幕保护为5分钟:setterm -blank 5

  3. JSP列表形式显示数据库中的数据 OracleCachedRowSet 实例

    现在数据库中有一张用户表,希望用户在jsp页面中输入用户名和密码以及 用户类型,在servlet中插入数据库后,在另一个jsp页面中把数据库中所有的用户名和类型都以列表的形式列出来    可以用Ora ...

  4. extern的意思

    还是在重温C++,看到extern的意思,觉得很有必要记下来. extern是用来干什么的大家想必都是很明白的. 如果有个全局变量,或者其他文件的全局变量,要在本文件或函数中使用,可以通过extern ...

  5. 完全自制的五子棋人机对战游戏（VC++实现）

    五子棋工作文档 1说明: 这个程序在创建初期的时候是有一个写的比较乱的文档的,但是很可惜回学校的时候没有带回来……所以现在赶紧整理一下,不然再过一段时间就忘干净了. 最初这个程序是受老同学所托做的,一 ...

  6. makefile中的自动化变量 【转】

    转自:http://blog.chinaunix.net/uid-28458801-id-3495215.html 自动化变量 模式规则中,规则的目标和依赖文件名代表了一类文件名:规则的命令是对所有这 ...

  7. [51NOD1181]质数中的质数（质数筛法）（欧拉筛）

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1181 思路:欧拉筛出所有素数和一个数的判定,找到大于n的最小质 ...

  8. 【转】Android Launcher研究 （一）

    这份源码是基于2.1的launcher2,以后版本虽有变化,但大概的原理一直还是保留了. 一.主要文件和类  1.Launcher.java:launcher中主要的activity. 2.DragL ...

  9. Maven3路程（五）用Maven创建Hibernate项目

    本文将用Maven3.Hibernate3.6.Oracle10g整合,作为例子. 环境清单: 1.Maven3.0.5 2.Hibernate3.6.5 Final 3.JDK1.7.0.11 4. ...

  10. 【Todo】各种排序整理

    今天面试别人,问到堆排序.发现自己都记不太清楚了. 堆排序 从小到大排序,要用到的是,最大堆. 过程是最大堆,堆顶的最大的元素,调换到数组最后,依次进行.最后达到从小到大的效果. 归并排序 可以看这个 ...