JQuery / JQuery UI水平分隔符

Question

最近，对于我正在研究的网站，我想创建一个水平分隔符，可以使用jquery调整页面上的两个元素。

基本上：

内容

的 的 ___ 分频器的 _ __ _ < / EM> _

内容

当：拖动分隔符时，它应该将其中任何一侧的“内容”元素调整为用户所需的大小。

这是我到目前为止所拥有的。

<div id="WorkRequests"></div>
<div id="Divider" style="height:10px; padding:5px; cursor:n-resize;"><hr /></div>
<div id="WorkRequest_Ajax"></div>

脚本：

var totalHeight = $("#Divider").parent().height();
    function ResizePage(divPosition) {
        var validDrag = true;

        // Math
        var minPercent = totalHeight * 0.25;
        var minBuffer = totalHeight * 0.05;
        var topHeight = divPosition.top - $("#content").position().top;
        var bottomHeight = (totalHeight - divPosition.top);

        // Check Drag
        if (topHeight < minPercent) {
            validDrag = false;
            $("#WorkRequests").height(minPercent + minBuffer);
        }

        if (bottomHeight < minPercent) {
            validDrag = false;
            $("#WorkRequest_Ajax").height(minPercent + minBuffer);
        }

        // Set Heights
        if (validDrag) {
            $("#WorkRequests").height(topHeight);
            $("#WorkRequest_Ajax").height(bottomHeight);
        }

        return validDrag;
    }

    $("#Divider").draggable({ axis: "y", drag: function (event, ui) { return ResizePage($(this).position()); } });

然而，当我拖动分隔线时，它只是四处跳转并锁定在两端，我尝试了许多不同的计算等，但我恐怕只是不明白调整两个元素的因素。

那么有没有人知道一个jquery插件会为我做这个，或者我如何解决我的尝试？

谢谢， 亚历克斯。

Answer 1

您也可以结帐UI.Layout jQuery plugin。这是一个demo。

Answer 2

您应该使用jquery可调整大小的交互：http://jqueryui.com/demos/resizable/

限制拖动区域非常容易，因此您只能水平调整大小（但我认为您实际需要的是可垂直调整大小的区域）