Хотите автоматически изменять размеры ширины и высоты div jQuery UI.Layout при изменении их размера в контейнере с помощью изменяемого размера пользовательского интерфейса JQuery!

Question

Я собираюсь использовать плагин jQuery UI.Layout с плагином JQuery UI, изменяемым размером плагин.

пример компоновки контейнера подключаемого модуля 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 изменяемого размера плагина и jquery ui перетаскиваемого плагина .

код прикрепления макета UI плагина:

$(document).ready(function () {

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

});

Но, кажется, когда я изменяю размер div id = "container" , компоновка была нарушена. внутреннее содержимое также сохраняет оригинал с высотой . Итак, мне нужен способ, чтобы компоновка внутренних элементов могла автоматически изменять размер при изменении их размера.

Большое спасибо !!

Answer 1

Я не знал этот плагин макета, но он кажется довольно интересным ... Спасибо!

Ознакомьтесь с документацией макета, есть метод resizeAll ()Msgstr "Изменяет размер всего макета, чтобы соответствовать его контейнеру".Я не совсем понимаю пример, который они приводят, но я думаю, вы можете использовать его.В противном случае вы можете вызвать эту функцию из события остановки изменяемого размера:

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