Menu
How can I create nested inner centers and inner souths? The following doesn't seem to do anything other than display "Inner Center" and "Inner South"? How can I make it show the layout resizer for Inner Center and Inner South?
<html>
<head>
<title>TEST</title>
<script src="jquery-latest.js"></script>
<script src="jquery.layout-latest.js"></script>
<script>
$(document).ready(function () {
$('body').layout({ applyDefaultStyles: true });
});
</script>
</head>
<body>
<div class="ui-layout-center">
Center
<div class="ui-layout-center">Inner Center</div>
<div class="ui-layout-south">Inner South</div>
</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-west">West</div>
</body>
</html>
http://layout.jquery-dev.net/demos/example.html
^Similar to this but with a "Inner Center" and "Inner South" in the "Center" area.
554
If you want to have nested layouts you need to call layout for each container where you want the nesting. So you need to mark your current ui-layout-center where you have the nested container e.g. with an id:
<div class="ui-layout-center" id="inner">
<div class="ui-layout-center">Inner Center</div>
<div class="ui-layout-south">Inner South</div>
</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-west">West</div>
And call again the layout on #inner to create the nested layout:
$('body').layout({
applyDefaultStyles: true
});
$('#inner').layout({
applyDefaultStyles: true
});
Demo JSFiddle.
See also the offical complex demo
107
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
