将网页化成两个区域，左边区域是一个树结构，右边区域是一个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，鼠标移动时也能捕捉到事件，完成想要的拖动改变区域大小的效果。
JS 实现 ResizeBar，可拖动改变两个区域(带iframe)大小
原文：http://www.cnblogs.com/yhzhtk/p/3522746.html