Yhzhtk's Blog

(热爱技术,高效Code)     归档  标签  源码  关于 


JS 实现 ResizeBar,可拖动改变两个区域(带iframe)大小

2014-01-16    js  resize bar 


将网页化成两个区域,左边区域是一个树结构,右边区域是一个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>
  <meta name="url" content="http://yhzhtk.info/2014/01/16/js-resizebar.html"/>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.js'></script>
 
  <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..

分类标签

jekyll3   编码1   windows1   bootstrap1   git3   删除1   命令3   python11   ide1   学习笔记3   实例分析1   mp3-tag1   github1   gravatar1   goagent1   翻墙1   C#4   找茬工具1   微博自动评论1   电脑监控1   备份1   云搜索1   wxPython1   py2exe1   yaml1   Eric1   PyQt1   Django1   设计模式5   翻译4   单例1   工厂1   抽象工厂1   生成器1   原型1   适配器1   桥接1   组合1   装饰1   外观1   享元1   代理1   MVC1   观察者1   状态1   策略1   模板1   访问者1   职责链1   解释器1   迭代器1   中介者1   备忘录1   js1   resize bar1   geohash1   口琴1   rpm安装gitlab1   CentOs1   WordPress1   数据库1   读脏数据1   丢失的修改1   不可重复读1   幻影读1   1   隔离1   思维导图1   事务1   笔记迁移1   note1   issue1  

最新博文

最新评论

Feed订阅


©2013 首页   关于     View me on GitHub Powered by Jekyll & Bootstrap 知识共享许可协议