如何使用jQuery UI製作水平分割器可調整大小（）

Question

水平線條/句柄，一旦被點擊並拖動，會使上部div減小而底部div增加，反之亦然。這個想法是實現一個類似於JSFiddle四個窗口界面上的分離器。

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() 

}); 

}）;