Как сделать горизонтальный сплиттер с jQuery UI Resizable()

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

}); 

});