JS 实现 ResizeBar，可拖动改变两个区域(带iframe)大小
将网页化成两个区域，左边区域是一个树结构，右边区域是一个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)大小的更多相关文章
- 鼠标拖动改变DIV等网页元素的大小的最佳实践
1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" la ...
- vuejs中拖动改变元素宽度实现宽度自适应大小
需求效果: 原理:拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(left),来实现拖动之后的不同宽度的计算:当拖动分隔线1时,计算元素框left和mid:当拖 ...
- jQuery实现鼠标拖动改变Div高度
最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...
- legend2---开发日志6（后端和前端如何相互配合(比如php，js，元素状态和数据改变)）
legend2---开发日志6(后端和前端如何相互配合(比如php,js,元素状态和数据改变)) 一.总结 一句话总结:php给元素初始状态,js根据这个状态做初始化和后续变化,使用vue真的很方便( ...
- 解决Js中的resize事件执行两次的方法
问题: 页面自适应的时候需要用到js的resize事件,但在执行过程中发现只要触发resize事件就会执行2次 原生js: window.onresize = function(){ console. ...
- js字符串长度计算(一个汉字==两个字符)和字符串截取
js字符串长度计算(一个汉字==两个字符)和字符串截取 String.prototype.realLength = function() { return this.replace(/[^\x00-\ ...
- Js验证 ：只能输入数字和小数点 验证是否是数字 js取float型小数点后两位
JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'') ...
- js只允许输入数字和两位小数
一.js只允许输入数字和两位小数 //只允许输入数字和两位小数 function clearNoNum(obj) { obj.value = obj.value.replace(/[^\d.]/g, ...
- js实现页面跳转的两种方式
CreateTime--2017年8月24日08:13:52Author:Marydon js实现页面跳转的两种方式 方式一: window.location.href = url 说明:我们常用 ...
随机推荐
- Largest Rectangle in Histogram-最大长方形
题目描述: 给定n个非负整数height[n],分别代表直方图条的高,每个条的宽设为1,求直方图中面积最大的矩形的面积 题目来源: http://oj.leetcode.com/problems/la ...
- 等宽格子堆砌 js
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- armeabi，armeabi-v7a ，x86 和mips 都是什么？
首先要明白ABI的概念: ABI(Application Binary Interface)实际就是指应用程序基于哪种指令集来进行编译,我们能用到的ABI 也就四种 armeabi,armeabi ...
- 关于RotateAnimation的各构造方法的参数
本文以RotateAnimation的构造方法 讲解. RotateAnimation(float fromDegrees, float toDegrees) 其他构造器的旋转也可参考这副图. Rot ...
- 加密解密(6)RSA算法过程图解
转自: http://blog.csdn.net/21aspnet/article/details/7249401 RSA算法 RSA公钥加密算法是1977年由Ron Rivest.Adi Shami ...
- 二维码(2)二维码登录原理及Android客户端示例
1,原理 服务器: 数据库: 建立一个2维码登录的数据表,产生一个登录页时,插入一条记录X,X含将要登录的用户名字段(初始为空),2维码中的数据字段(唯一) 登录页面: 在产生的2维码中包含关键数据Y ...
- 【Todo】CSDN的《问底》系列-学习
看到CSDN的这个系列<问底>,看各篇文章的题目感觉不错.好好学习下: http://www.csdn.net/tag/%E9%97%AE%E5%BA%95/news
- Android App接入微信开放平台注意事项
一.Android第三方应用接入微信开放平台的注意事项: 1. 到微信开放平台官网申请正式的AppID(需通过审核),要填写包名.app签名的md5值.至于如何获取app签名信息,官方提供签名包apk ...
- FireMonkey 平台初探
最为第一个本地化跨平台的框架:FireMonkey需要处理以及融合不同平台的技术非常之多,所以目前的测试仅仅在于表面现象,至于效率问题还不得而知. 从一个程序员的角度来看这个框架,我觉得有以下这些方面 ...
- Qt环境搭建（Qt Creator）
简述 上一节中介绍了如何进行Qt和Visual Studio的下载安装,随后演示了如何将Qt集成到Visual Studio中,并完成了我们第一个Qt小程序-Hello World.下面主要讲解如何利 ...