将网页化成两个区域，左边区域是一个树结构，右边区域是一个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. fastdfs-client-java工具类封装

    FastDFS是通过StorageClient来执行上传操作的 通过看源码我们知道,FastDFS有两个StorageClient工具类.

  2. 管理IPv4网络连接

    1. 使用 nmcli 检查所有连接 [root@desktop1 ~]# nmcli connection NAME UUID TYPE DEVICE eno33554960 5be7dba9-6b ...

  3. Linux配置自建 YUM 软件存储库

    yum软件仓库的搭建方式有三种,分别是本地yum源,网络yum源,第三方软件仓库. 以下示例演示了搭建本地yum仓库的方法: 1. 删除 /etc/yum.repos.d/dvd.repo 这个仓库文 ...

  4. SQL SERVER ->> Wait Stats

    等待状态是隔离SQL SERVER性能问题的一个重要手段,从实例级别入手.可以大概看出SQL SERVER在过去某段时间内是否处于某种资源的吃紧状态.不过取决于你是否有建立有效的性能数据收集机制.sy ...

  5. C#AutoResetEvent和ManualResetEvent的区别

    一:终止状态和非终止状态 首先说说线程的终止状态和非终止状态.AutoResetEvent和ManualResetEvent的构造函数中,都有bool变量来指明线程的终止状态和非终止状态.true表示 ...

  6. USACO Section 4.2: Drainage Ditches

    最大流的模板题 /* ID: yingzho1 LANG: C++ TASK: ditch */ #include <iostream> #include <fstream> ...

  7. onTouch与onClick事件的关系

    这几天遇到点关于Android的触摸事件相关的,还跟onClick有关,暂且记下: LinearLayout分别设置了onTouchListener,onClickListener,onLongCli ...

  8. Google 镜像站大集合

    没有了google的日子是相当难受,下面推荐一些google的镜像站,感谢原文博主的无私奉献,同时也欢迎大家总结科研上的小技巧,心得等来本平台投稿,好东西当然要拿出来共同分享! 以下镜像站分原版和非原 ...

  9. poj-2376 Cleaning Shifts （排序+贪心）

    http://poj.org/problem?id=2376 john有n头牛做打扫工作,他想在t时间内每个时间都至少有一头牛在做打扫工作,第一头牛在1,最后一头牛在t时间,每一头牛工作都有一个开始时 ...

  10. BZOJ 2038 小Z的袜子(hose)（分组）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2038 题意:给出n个袜子.m个询问,每个询问一个区间[L,R],询问这个区间中任意拿出两 ...