当使用JQuery UI调整大小调整容器的大小时，想要自动调整jQuery UI.Layout的div宽度和高度！

Question

我打算使用jQuery UI.Layout Plug-in和JQuery UI可调整大小的插件。

the container layout example of JQuery UI layout plugin:

我的代码结构是这样的：

HTML代码：

<div id="container"> 

    <div id="paddingWrapper" class="pane ui-layout-center"> 

     <div class="pane ui-layout-center"> 

      Center 

      <p><a href="http://layout.jquery-dev.net/demos.html"><b>Go to the Demos page</b></a></p> 

     </div> 

     <div class="pane ui-layout-north">North</div> 

     <div class="pane ui-layout-south">South</div> 

     <div class="pane ui-layout-east">East</div> 

     <div class="pane ui-layout-west">West</div> 

    </div> 

</div> 

和DIV ID = “容器”将与jQuery UI的可调整大小的插件被附接和jquery ui可拖动插件。

的代码附加布局UI插件：

$(document).ready(function() { 

    $('#container').layout(); 

}); 

但似乎当我调整DIV ID =“容器”，布局是broken.the 内内容也保留原件和高度。因此，我需要一种方法来使内部的布局可以在调整它们的容器大小时自动调整大小。

非常感谢！

Answer 1

我不知道这个布局插件，但它似乎很有趣......谢谢！

检查出布局的documentation，有一个名为resizeAll（）的方法“调整整个布局以适合其容器”。我没有真正得到他们提供的例子，但我想你可能想要使用它。否则，你可以从调整大小的停止事件调用这个函数：

$("#container").resizable({ 
    stop: function(){ 
    $("#paddingWrapper").layout("resizeAll"); 
    } 
});