Создать вложенные слои Jquery-Layout

Question

Я пытаюсь создать вложенные слои. Я хочу, чтобы внутри моего центрального слоя были две колонки (западная и восточная). Я знаю, что кажется, что я мог бы просто разделить и сделать западные и восточные столбцы вместо центра, но мне нужно сделать больше на этой странице позже, которая требует вложенных слоев.

Я использовал JQuery-макет, но не вложенный ранее.

Вот что у меня так далеко.

РЕДАКТИРОВАТЬ:

Я изменил это так, теперь я пытаюсь на север, юг, восток и запад внутри центра. Это легче понять, чем просто разбить центр на 2.

http://jsfiddle.net/dan_vitch/gD97N/1/

Answer 1

Я получил это для работы в VS, но jfiddle не нравится это:

HTML:

<div class="ui-layout-north master-header">
    <h1>header</h1>
</div>
<div class="ui-layout-center" id="mainContent">
    <div class="ui-layout-north"> Inner - North</div>
    <div class="ui-layout-south"> Inner - South</div>
    <div class="ui-layout-west">  Inner - West</div>
</div>
<div class="ui-layout-south master-footer">
    <h1>footer</h1>
</div>

JQuery:

$(document).ready(function(){
    outLayout = $('body').layout({
        defaults: {
           applyDefaultStyles: true
        }
    });

    innerLayout = $("#mainContent").layout({
        defaults: {
            applyDefaultStyles: true
        },
        center: {
            paneSelector:"#mainContent"
        }
    });
});