2011-02-28 80 views
7

最近爲我正在工作的網站我想創建一個水平分隔線能夠調整使用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插件,會爲我做到這一點,或者我怎麼能修復我的嘗試?

謝謝, 亞歷克斯。

+0

希望你修正了你的嘗試,jQuery UI在我的經驗中相當重 – 2013-02-08 07:00:15

回答

3

你應該只使用jQuery的可調整大小的互動:http://jqueryui.com/demos/resizable/

這是很容易限制拖動領域,所以你只能水平調整(但我認爲你真正需要的是一個垂直可調整大小的區域)

+0

是的,我想要做的就是垂直調整大小。我想看看這個鏈接並回復你,謝謝。 – 2011-02-28 07:13:24

+2

你說過要用什麼。請說說如何使用它。 – kbro 2015-12-04 06:53:46