如何使用jQuery UI Resizable（）制作水平分割器

Question

水平线/手柄，一旦点击并拖动，会使上部div的大小减小而底部div增加，反之亦然。这个想法是为JSFiddle四个windows界面上的一个实现类似的分割器。

Answer 1

The implementation Demo on JSFiddle is here

使用Javascript：

$(function() {
var bottomElem = $(".resizable-bottom");
var bottomElemOriginalHeight = bottomElem.height();
$(".resizable-top").resizable({
    handles: 's',
    resize: function(event, ui) {
        bottomElem.height(bottomElemOriginalHeight - (ui.element.outerHeight() - ui.originalSize.height));

    },
    stop: function(event, ui) {
        bottomElemOriginalHeight = bottomElem.height();
    },
    //This has the effect of minHeight for bottomElem
    maxHeight: $(".resizable-top").height()

});

}）;