javascript JQuery/JQueryUI 水平分隔线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5139096/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery/JQueryUI hortizontal divider
提问by Alex Hope O'Connor
recently for a website I am working on I wanted to create a horizontal divider capable of resizing two elements on a page using jquery.
最近对于我正在处理的网站，我想创建一个水平分隔线，能够使用 jquery 调整页面上两个元素的大小。
Basically:
基本上：
Content
内容
___Divider_____
___分隔线___ __
Content
内容
When: the divider is dragged, it should resize the "Content" elements either side of it to the users desired size.
当：拖动分隔线时，它应该将其两侧的“内容”元素调整为用户所需的大小。
Here is what i have so far.
这是我到目前为止所拥有的。
<div id="WorkRequests"></div>
<div id="Divider" style="height:10px; padding:5px; cursor:n-resize;"><hr /></div>
<div id="WorkRequest_Ajax"></div>
And the script:
和脚本：
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()); } });
However when I drag the divider it simply jumps around and locks at either extremity, I have tried many different calculations etc, but I am afraid I just simply do not understand the factors in resizing both elements.
但是，当我拖动分隔线时，它只是跳跃并锁定在任一端，我尝试了许多不同的计算等，但恐怕我只是不了解调整两个元素大小的因素。
So does anyone know a jquery plugin that will do this for me, or how i can fix my attempt?
那么有谁知道可以为我做这件事的 jquery 插件，或者我如何解决我的尝试？
Thanks, Alex.
谢谢，亚历克斯。
回答by Darin Dimitrov
You may also checkout the UI.Layout jQuery plugin. Here's a demo.
您还可以查看 UI.Layout jQuery 插件。这是一个演示。
回答by JohnP
You should just use the jquery resizable interaction : http://jqueryui.com/demos/resizable/
你应该只使用 jquery resizable 交互：http: //jqueryui.com/demos/resizable/
It's easy enough to restrict the dragging areas so you can only resize horizontally (but I think what you actually need is a vertically resizable area)
限制拖动区域很容易，因此您只能水平调整大小（但我认为您实际需要的是垂直可调整大小的区域）
