1

到目前为止，我有两个固定长度的 div，它们通过在其中动态嵌入 iframe 来加载外部 URL。Divs 彼此相邻出现 - 一个在左侧，另一个在右侧。

截至目前，我已将它们的宽度固定为50%每个。但是，我想让用户灵活地增加任何 div 的宽度，以便轻松查看里面的 URL without scrolling horizontally。就像根据他的需要将分隔两个 div 的边框向左或向右拖动。

有没有办法我可以做到这一点？请建议任何图书馆或其他东西。

我浏览了一个用于图像的库220 。我不知道这对动态 iframe 有什么作用。

这是显示 div 的JSFiddle。

<div>
    <div id="originalPage" style="width:54%;height: 730px;float:left">  
        <p>one div </p>
    </div>
    <div id="diffReport" style="width:45%; height: 730px;float:right">
        <p>another div</p>
    </div>
</div>
4

4 回答 4

1

有一个很棒的 jQuery 插件，在这里使用 jQuery Splitter：

http://jquery.jcubic.pl/splitter.php

于 2013-10-31T10:14:16.943 回答
0

使用 jQuery UI 库来调整大小/拖动。

HTML

<div id="demo"></div>

脚本

    <script>
    $(function(){$('#demo').draggable().resizable();});

    $('#demo')
        .resizable({
            start: function(e, ui) {
                alert('resizing started');
            },
            resize: function(e, ui) {

            },
            stop: function(e, ui) {
                alert('resizing stopped');
            }
        });
</script>

小提琴是

http://jsfiddle.net/VuqbN/

更新了你的小提琴

http://jsfiddle.net/vw9qt/1/

于 2013-10-31T09:51:19.703 回答
0 
<div>
    <div class="resizable" id="originalPage" style="width:54%;height: 730px;float:left">  
        <p>one div </p>
    </div>
    <div class="resizable" id="diffReport" style="width:45%; height: 730px;float:right">
                <p>another div</p>
    </div>
</div>

$(function() {$( ".resizable" ).resizable({animate: true,animateEasing:'swing',imateDuration: 500
});});

#diffReport, #originalPage{
        border: 1px solid;
}
.ui-resizable-helper { border: 1px dotted gray; }
.resizable { display: block; width: 400px; height: 400px; padding: 30px; border: 2px solid     gray; overflow: hidden; position: relative; }
#diffReport { width: 100%; height: 100%; }
#originalPage { width: 100%; height: 100%; }
于 2013-10-31T09:48:49.850 回答
0
  1. var isDragging = false
  2. var lastPageX = null
  3. 在现有的中间创建一个新的 div。
  4. mousedown在该 div 上 附加一个事件侦听器。
    • 设置isDragging为true和lastPageX_event.pageX
  5. mousemove在封闭的 div 上 附加一个事件侦听器。
    • 仅在以下情况下运行isDragging
    • var diff event.pageX - lastPageX
    • 添加diff到左侧可调整大小的 div
    • diff从右侧可调整大小的 div中删除
    • 设置lastPageX为event.pageX
  6. 将事件侦听器附加mouseup到document
    • 设置isDragging为false
于 2013-10-31T09:49:20.593 回答