2

我将使用带有JQuery UI 可调整大小插件的 jQuery UI.Layout插件。

JQuery UI 布局插件的容器布局示例：

我的代码结构是这样的：

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 resizable plugin和jquery ui draggable plugin。

代码附加布局 Ui 插件：

$(document).ready(function () {

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

});

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

非常感谢！！

4

1 回答 1

3

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

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

$("#container").resizable({
  stop: function(){
    $("#paddingWrapper").layout("resizeAll");
  }
});
于 2011-01-27T08:29:09.560 回答