jquery - 当使用 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="container" 将附加 jquery ui 可调整大小插件 和 jquery ui 可拖动插件。

代码附加布局Ui插件:

$(document).ready(function () {

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

});

但是当我调整 div id="container" 的大小时，布局似乎被破坏了。内部内容还保留原始内容和高度。所以，我需要一种方法，让内部的布局可以在我调整它们的容器大小时自动调整大小。

非常感谢!!

Answer 1

我不知道这个布局插件，但它看起来很有趣......谢谢!

查看 documentation在布局中，有一个名为 resizeAll() 的方法“调整整个布局的大小以适合其容器”。我不太明白他们给出的例子，但我想你可能想使用它。否则，您可以从可调整大小的停止事件中调用此函数:

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