将网页化成两个区域，左边区域是一个树结构，右边区域是一个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. list、set、map的特点

    java 集合(list.set.map)的特点 集合相关的类有一大堆,一般也只用到常用的方法增删改查,而且它它们的方法名也基本一样,所以一直都不知道什么时候用什么集合, 今天趁有空特意从网上整理资料 ...

  2. WebService另一种轻量级实现—Hessian 学习笔记

    最近和同事聊天,得知他们在使用一种叫做Hessian的WebService实现方式实现远 程方法调用,是轻量级的,不依赖JavaEE容器,同时也是二进制数据格式传输,效率比SOAP的XML方式要高.感 ...

  3. FFmpeg FFmpeg的使用及常用参数

    FFmpeg的使用及常用参数 一.下载: 官网:http://ffmpeg.org/ 二.demo: 1 class Program 2 { 3 static void Main(string[] a ...

  4. 易犯的PHP小错误及相应分析

    变量声明如果在一条语句中声明一个变量,如下所示:$var = 'value'; 编译器首先会求出语句右半部分的值,恰恰正是语句的这一部分常常会引发错误.如果使用的语法不正确,就会出现解析错误. 解析错 ...

  5. 虚拟机 主机无法访问虚拟机中Linux上的tomcat服务

    在wmware中安装linux后安装好数据库,JDK及tomcat后启动服务,虚拟机中可以访问,但是主机却无法访问,但是同时主机和虚拟机之间可以ping的通,网上查阅资料后,解决方法是关闭虚拟机中的防 ...

  6. YTU 2618: B 求类中数据成员的最大值-类模板

    2618: B 求类中数据成员的最大值-类模板 时间限制: 1 Sec  内存限制: 128 MB 提交: 430  解决: 300 题目描述 声明一个类模板,类模板中有三个相同类型的数据成员,有一函 ...

  7. ListView(3)关于listview滚动事件，何时滚动到顶部或底部

    给listview设置一个OnScrollListener就可 ListView.OnScrollListener scrollListener = new ListView.OnScrollList ...

  8. R语言屏幕输出

    cat("the total number is:",3+5,"\n") print(x, ...) ?print?cat?format ?write

  9. SASS -- 基本认识

    SASS 是一种 CSS 的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得 CSS 的开发,变得简单和可维护. SASS 提供四个编译风格的选项: * nested:嵌套缩进的 css ...

  10. CSS visibility与display 属性

    所有主流浏览器都支持 visibility 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持 "inherit" 和 "colla ...