JQuery / JQueryUI hortizontal分隔符
最近，对于我正在研究的网站，我想创建一个水平分隔符，能够使用jquery调整页面上的两个元素。
基本上：
内容
___ 分频器 _ __ _ _
内容
当：拖动分隔符时，它应该将其中任何一侧的“内容”元素调整为用户所需的大小。
这是我到目前为止所拥有的。
和剧本：
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插件会为我做这个，或者我如何解决我的尝试？
谢谢，Alex。
您也可以查看UI.Layout jQuery插件 。 这是一个演示 。
您应该使用jquery可resize的交互： http ： //jqueryui.com/demos/resizable/
限制拖动区域非常容易，因此您只能水平resize（但我认为您实际需要的是可垂直resize的区域）