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。
改后的代码如下:
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,鼠标移动时也能捕捉到事件,完成想要的拖动改变区域大小的效果。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。