How can I add a North Inner Panel using the jQuery Layout user interface?

advertisements

I came a cross a page management plugin i.e. jQuery UI Layout. I want to use it in an application I am developing.

I am trying to create a page that have 3 panels. On the west, I need to add a panel that takes the full height of my page. I also need to add a north panel that will start from where the "west panel" end, all the way to the east side of the screen. Finally, I like to add a panel in the middle "under the west panel which take the remaining of the page.

In other words, I am trying to do the following layout using jQuery UI Layout.

Here is what I have done

 $(function () {
        $('body').layout({
            applyDefaultStyles: true,
            west__size: 200
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="http://layout.jquery-dev.com/lib/js/jquery.layout-latest.js"></script>

<link href="http://layout.jquery-dev.com/lib/css/layout-default-latest.css" rel="stylesheet"/>

<div class="ui-layout-north ui-layout-pane ui-layout-pane-north">
        NORTH
    </div>
    <div class="ui-layout-west">
        WEST
    </div>
    <div class="ui-layout-center">
        MIDDLE
    </div>

But, this is making the north panel go across the page and over the west panel.

How can I fix it and get the look that I drew above?


You sort of answered your own question when you asked about an "inner north pane". What you need is an outer layout containing only west and center panes. Then inside that center-pane you add an inner-layout with only north and center panes. That will give you what you want...

<div class="ui-layout-west"> WEST </div>
<div class="ui-layout-center">
    <div class="ui-layout-north"> NORTH </div>
    <div class="ui-layout-center"> CENTER </div>
</div>