将网页化成两个区域，左边区域是一个树结构，右边区域是一个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. 使用YUM管理软件包

     一.概念 YUM,全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器.基於RPM包管理,能够从指定的服务器 ...

  2. C++调用python

    本文以实例code讲解 C++ 调用 python 的方法. 本文在util.h中实现三个函数: 1. init_log: 用google log(glog)初始化log 2. exe_command ...

  3. [Android教程]EditText设置/隐藏光标位置、选中文本和获取/清除焦点

      有时候需要让光标显示在EditText的指定位置或者选中某些文本.同样,为了方便用户输入以提升用户体验,可能需要使EditText获得或失去焦点. 1. 设置光标到指定位置 EditText et ...

  4. IE下easyui 缓存问题

    $.ajaxSetup ({   cache: false //关闭AJAX相应的缓存 }); 这一句话就足够了,很管用!

  5. linux 多处理器概念

    Linux 提出了 Multi-Processing 的概念,它的调度器可以将操作系统的线程均分到各个核(或硬件线程)上去执行,以此达到并行计算的目的,从而也可以极大地提高系统的性能. 实现计数器 1 ...

  6. jsp之EL表达式

    1.null值 null值会用""进行显示 2.隐式对象 1).pageScope.requestScope(相当于request).sessionScope(相当于session ...

  7. android 单词

    inflate: 胀, 膨, 通货膨胀, 膨胀系数

  8. UVa 10391 (水题 STL) Compound Words

    今天下午略感无聊啊,切点水题打发打发时间,=_=|| 把所有字符串插入到一个set中去,然后对于每个字符串S,枚举所有可能的拆分组合S = A + B,看看A和B是否都在set中,是的话说明S就是一个 ...

  9. HDU 4513 吉哥系列故事——完美队形II

    变形的Manacher算法,在扩展的时候要加入限制条件,满足题目中说的从左到中间身高不减. 其他地方倒是没有什么改动.. //#define LOCAL #include <iostream&g ...

  10. 事件类型: 错误 事件来源: Service Control Manager 事件种类: 无 事件 ID: 7000

    在控制面板\管理工具\服务里找dns Client 服务,把他启动了