jQuery Layout Demo

Uses jQuery UI Layout plugin (http://layout.jquery-dev.net/)

by Avinash_R

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<div id="main">
    <div id="content" class="ui-layout-center">
        <div class="ui-layout-north">
            This is the toolbar <br/>
            <button>Show Add Contents</button>
        </div>
        <div id="view" class="ui-layout-center">
            <div class="ui-layout-center">
                This is the view of the content
            </div>
            <div class="ui-layout-south">
                This is the edit of the content
            </div>
            <div id="add" class="ui-helper-hidden">
                This is the add of the content
            </div>
        </div>
    </div>
    <div class="ui-layout-north">Header</div>
    <div class="ui-layout-west">Menu</div>
    <div class="ui-layout-south">Footer</div>
</div>

CSS

body,html,#main{
    height:100%;
}
.ui-layout-resize-north,.ui-layout-resize-south{
    display:none !important;
}
.ui-layout-north{
    border-bottom: 1px solid #F6F6F6;
}
.ui-layout-south{
    border-top: 1px solid #F6F6F6;
}
#contents{
    height:100%;
}
.ui-layout-resizer{
    background: whiteSmoke;
    background: url(../img/handle-v.png) 3px 50% no-repeat;    
}
.ui-layout-resizer .ui-layout-toggler{
    background: #f6f6f6;
}

JavaScript

$('#main').layout({
    //applyDefaultStyles:true,
    north:{
        size:30,
        resizable:false,
        closable:false,
        slidable:false,
        spacing_open : 0
    },
    south:{
        size:30,
        resizable:false,
        closable:false,
        slidable:false,
        spacing_open : 0
    },
    west: {
        resizable: false,
        size: 40,
        togglerLength_closed: 40,
        togglerAlign_closed: "top",
        togglerContent_closed: "",
        togglerTip_open: "Hide Menu",
        togglerTip_closed: "Show Menu",
        sliderTip: "Show/Hide",
        slideTrigger_open: "mouseover"
    }
});
$("#content").layout({
    north:{
        resizable:false,
        closable:false,
        slidable:false,
        spacing_open : 0
    }
});
$("#view").layout({
    south:{
        resizable:false,
        closable:false,
        slidable:false,
        spacing_open : 0
    }
});
$('button').click(function(){
    $('#view').children().toggle();
});