将网页化成两个区域，左边区域是一个树结构，右边区域是一个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。
改后的代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
<!DOCTYPE html><html><head> <meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<title>ResizeBar by yhzhtk</title>
<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，鼠标移动时也能捕捉到事件，完成想要的拖动改变区域大小的效果。