How to split pane in jQuery Layout plugin?

Question

I am using the jQuery Layout plugin to create a page with north, south, west, east and center pane. I'd like to split - after the layout is initiated - the west pane into two panes (west-north and west-south) for example.

But I didn't find any functions in the API to split a pane! Any idea?

Vishwajeet Vishwajeet · Accepted Answer · 2017-07-11T03:37:40

You can use nested panes. The plugin supports unlimited nesting through childOptions. http://layout.jquery-dev.com/demos/nested_simple.html

I'd suggest naming the child panes uniquely.

   <div id="mainContainer">
        <iframe class="ui-layout-center" id="someiframecontent-right">Center Right content</iframe>
        <div class="ui-layout-west">
            <div class="ui-layout-childsouth">North West content </div>
            <div class="ui-layout-childcenter">South west content </div>
        </div>
    </div>
    <script type="text/javascript">
        $('#mainContainer').layout({
            west__minSize: 100,
            west__size: 0.5,
            west__maxSize: 0.9,
            center__minSize: 100,
            center__size: 0.5,
            center__maxSize: 0.9,
            livePaneResizing: true,
            west__childOptions: {
                center__paneSelector: '.ui-layout-childcenter',
                center__minSize: 100,
                center__size: 0.5,
                center__maxSize: 0.9,
                south__paneSelector: '.ui-layout-childsouth',
                south__minSize: 100,
                south__size: 0.5,
                south__maxSize: 0.9,
                livePaneResizing: true
            }
        });
    </script>

Remember that center pane is always necessary (including in the child panes), as it's required to fill up the remaining spaces left over by other panes.

How to split pane in jQuery Layout plugin?

1 Answers