Moving south panel between side panels

Question

By default, the jquery layout plugin has a setup where north and south panels are full width of the browser window, making the east and west panels vertically smaller as they must fit between south and north panels.

I would like to have a setup with more vertical space for side panels: north panel would be full width, but south panel would lie between east and west, shrinking in width if any of the side panels are opened. In other words, the side panels should go all the way to the bottom.

Is it possible to configure jquery layout like this? I can't find anything related in the documentation, and I'm using the largely undocumented 1.3 Release Candidate version.

Answer 1

Maybe you can try by using nested layouts. The most external is for the side panels, and the internal layout for the north and south.

Answer 2

The best solution for these options are:

• Create a north layout
• Create a west layout
• Create a center layout and set a propper class, ex "outer-center"
  • Create a east layout inside "outer-center and assing it a class.
  • Create a center layout inside "outer-center and assing it a class.
  • Create a south layout inside "outer-center and assing it a class.

And call the js init function again in the next way (using your new classes).

<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"
        }

    });
});

I will add you a example of my idea on live: http://jsfiddle.net/9ut28bf8/2/