最近爲我正在工作的網站我想創建一個水平分隔線能夠調整使用jQuery的頁面上的兩個元素。JQuery/JQueryUI hortizontal divider
基本上:
內容
___分頻器_ __ _ _
內容
當:所述隔板被拖動,它應該調整的「內容」的元素之一它側到期望的尺寸的用戶。
這是我到目前爲止。
<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插件,會爲我做到這一點,或者我怎麼能修復我的嘗試?
謝謝, 亞歷克斯。
希望你修正了你的嘗試,jQuery UI在我的經驗中相當重 – 2013-02-08 07:00:15