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，鼠标移动时也能捕捉到事件，完成想要的拖动改变区域大小的效果。
