JQuery/JQueryUI hortizontal分隔符

Question

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

基本上:

内容

___ 分频器_ __ _ _

内容

当:拖动分隔符时,它应该将其中任何一侧的"内容"元素调整为用户所需的大小.

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

<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插件.这是一个演示.