これらのオプションの最適なソリューションは次のとおりです。
- 北側のレイアウトを作成する
- 西のレイアウトを作成する
- センターレイアウトを作成し、「outer-center」などのプロッパークラスを設定します
- "outer-center" 内に East レイアウトを作成し、クラスに割り当てます。
- "outer-center" 内に center レイアウトを作成し、それをクラスに割り当てます。
- "outer-center" 内に南のレイアウトを作成し、それをクラスに割り当てます。
そして、次の方法で (新しいクラスを使用して) js init 関数を再度呼び出します。
<div class="ui-layout-north"></div>
<div class="ui-layout-west"></div>
<div class="ui-layout-center outer-center">
<div class="ui-layout-east middle-east"></div>
<div class="ui-layout-center middle-center"></div>
<div class="ui-layout-south middle-south"></div>
</div>
<div class="ui-layout-south"></div>
$(document).ready(function () {
var myLayout = $('body').layout({
north__size: 140,
north__maxSize: 140,
west__size: 250,
center__paneSelector: ".outer-center",
center__childOptions: {
center__paneSelector: ".middle-center",
east__paneSelector: ".middle-east",
south__paneSelector: ".middle-south"
}
});
});
ライブでの私のアイデアの例を追加します: http://jsfiddle.net/9ut28bf8/2/