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。

改后的代码如下:

这样即使有iframe,鼠标移动时也能捕捉到事件,完成想要的拖动改变区域大小的效果。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。