2015-01-12 44 views
0

我有一個頁面有一個左div和右div。 div使用display:table和相關標籤進行組織。使用jquery-ui的可調整大小的工具可以調整正確的div大小。我希望能夠將分隔線拖動到左側和右側,並更改窗格的相對大小。如何製作左右面板,並能夠在它們之間滑動分隔線?

但這不太對。首先,右窗格只能通過其右邊緣和右下角來調整大小,而不能通過左邊緣進行調整。如何真的在這個js/html/css世界中製作分離器?

http://jsfiddle.net/rhedin/xhaxme4c/

<!DOCTYPE html> 
<html lang="en" style="height:100%;width:100%;border:3px solid red"> 
    <head> 
     <meta charset="utf-8"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> 
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
     <style> 
      * { 
       box-sizing: border-box 
      } 
     </style> 
    </head> 
    <body style="height:100%;width:100%;border:3px solid blue;margin:0;padding:8px"> 
     <div id="allBodyDiv" style="width:100%;height:100%;border:3px solid black;display:table"> 
      <div id="leftWithinBodyDiv" style="border:3px solid blue;display:table-cell"> 
      </div> 
      <div id="rightWithinBodyDiv" style="width:100px;border:3px solid red;display:table-cell"> 
      </div> 
     </div> 
     <script> 
      $(function() { 
       $("#rightWithinBodyDiv").resizable({}); 
      }); 
     </script> 
    </body> 
</html> 

回答

1

添加調整大小功能,左邊一個爲好。檢查我的小提琴,看看這是你的意思。

http://jsfiddle.net/xhaxme4c/4/

一個更好的辦法來做到這一點是掛鉤調整大小功能。

http://jsfiddle.net/dorzb3kn/

$(function() 
{ 
    $(".leftcolumn").resizable(
    { 
     autoHide: true, 
     handles: 'e', 
     resize: function(e, ui) 
     { 
      var parent = ui.element.parent(); 
      var greenboxspace = parent.width() - ui.element.outerWidth(), 
       redbox = ui.element.next(), 
       redboxwidth = (greenboxspace - (redbox.outerWidth() - redbox.width()))/parent.width()*100+"%"; 
       redbox.width(redboxwidth); 
     }, 
     stop: function(e, ui) 
     { 
      var parent = ui.element.parent(); 
      ui.element.css(
      { 
       width: ui.element.width()/parent.width()*100+"%", 
      }); 
     } 
    }); 
}); 
+0

有趣!謝謝,羅伯特。我想在右邊的框中使用{handles:'w'}。與.position({my:'right',at:'right','#parentElement'})結合使用。直到您指出它時,我並不知道這些手柄:選項。 – user2171796

+1

不客氣:) –

+1

感謝您的幫助,羅伯特。 – user2171796