JQuery UI resizableを使用してコンテナのサイズを変更すると、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> 

とjqueryのUIサイズ変更可能なプラグインに添付されますのdivのid = "コンテナ" とjquery ui draggable plugin。

コードは、レイアウトのUIプラグインを添付：とオリジナルを維持も

$(document).ready(function() { 

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

}); 

をしかし、私がのdivのid =「コンテナ」のサイズを変更すると、レイアウトがbroken.the インナー内容だったようで、高さ。だから、私はインナーのレイアウトを自動的にサイズ変更するときにそれらのコンテナのサイズを変更できるようにする方法が必要です。

ありがとうございます！

Answer 1

このレイアウトプラグインはわかりませんでしたが、面白いようです...ありがとう！

レイアウトのdocumentationをチェックすると、resizeAll（）というメソッドがあります。 "レイアウト全体をそのコンテナに合わせてサイズを変更します"。私は実際にそれらの例を得ていませんが、あなたがそれを使いたいかもしれないと思います。それ以外の場合は、サイズ変更のストップイベントからこの関数を呼び出すことができます。

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