Layout

Usage
Markup
The layout panel must has one 'center' panel.

 

HTML

<div id="cc" style="width:600px;height:400px;">
<div region="north" title="North Title" split="true" style="height:100px;"></div>
<div region="south" title="South Title" split="true" style="height:100px;"></div>
<div region="east" icon="icon-reload" title="East" split="true" style="width:100px;"></div>
<div region="west" split="true" title="West" style="width:100px;"></div>
<div region="center" title="center title" style="padding:5px;background:#eee;"></div>
</div>

jQuery

$('#cc').layout();

 

Dependencies
panel
resizable
Layout Panel Options
All the properties is defined on <div/> markup, which the layout panel is created from it.

Name     Type         Description Default
title        string         The layout panel title text. null
region     string         Defines the layout panel position, the value is one of following: north, south, east, west, center. 
border    boolean     True to show layout panel border. true
split       boolean     True to show a split bar which user can change the panel size. false
icon        string        An icon CSS class to show a icon on panel header. null
href         string        An URL to load data from remote site. null