RSS订阅
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，鼠标移动时也能捕捉到事件，完成想要的拖动改变区域大小的效果。
Load Disqus comments, wait a moment..
更多订阅