jQuery Layout Top+Bottom

Reference: http://layout.jquery-dev.net/

by brian428

HTML

<link rel="stylesheet" href="http://layout.jquery-dev.net/lib/css/layout-default.css">
<script src="http://layout.jquery-dev.com/lib/js/jquery-latest.js"></script>
<script src="http://layout.jquery-dev.com/lib/js/jquery-ui-latest.js"></script>
<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<!-- <div class="ui-layout-north">North</div>
<div class="ui-layout-center">Center</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>-->

<div id="root-container">

<div class="ui-layout-center">
  <h1>Main section</h1>
  <ul>
    <li>Top tabs (event list, etc.) would go here.</li>
    <li>This panel should be independently scrollable.</li>
    <li>Starts at 50% of height.</li>
  </ul>
  <p>
    <span style="font-weight: bold">Full ui-layout config options:</span>
    <pre id="layout-config-opts"></pre>
  </p>
	<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
	<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
	<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
	<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
</div>

<div class="ui-layout-south">
  <h1>Bottom section</h1>
  <ul>
    <li>Bottom tabs (event editor, etc.) would go here.</li>
    <li>This panel should be independently scrollable.</li>
    <li>Starts at 50% of height.</li>
    <li>Can be resized, and can specify a minimum height (200 pixels in this example)</li>
    <li>Can be collapsed and expanded.</li>
 ...

CSS

html, body {
  background:	#666;
  width:		100%;
  height:		100%;					
  padding:	0;
  margin:		0;
  overflow:	auto; /* when page gets too small */
}

#root-container {
  background:	#999;
  width:		100%;
  height:		100%;					
  padding:	0;
  margin:		0;
}

#layout-config-opts {
  border: 2px solid #336699;
  padding: 10px;
  background-color: #ffffe6;
  font-family: monospace;
  line-height: 1.3em;
}

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

h1 {
  font-size: 1.5em;
  font-weight: bold;
  margin: 10px 0px 10px 0px;
}

ul {
    list-style-type: disc;
    margin-left: 20px;
}

JavaScript

$(document).ready(function () {

console.log( "layout default configs", $.layout.defaults );
// Full docs on config at: http://layout.jquery-dev.com/changelog.cfm
// Page find for "New & Updated Options"

$('#root-container').layout({ 
	autoResize:				true	// try to maintain pane-percentages
  //,	autoReopen:				true	// auto-open panes that were previously auto-closed due to 'no room'
  //,	autoBindCustomButtons:	true
  //,	west__size: 			.20		// percentage size expresses as a decimal
  //,	east__size: 			.20
  , south__size: .50
  ,	south__slidable: true	// OVERRIDE the pane-default of 'slidable=true'
  ,	south__togglerLength_closed: '100%'	// toggle-button is full-width of resizer-bar
  ,	south__spacing_closed: 20		// big resizer-bar when open (zero height)
  ,	south__resizable: true	// OVERRIDE the pane-default of 'resizable=true'
  , south__minSize: 200
  //,	minSize:				100
  //,	center__minWidth:		239 // 3 x 75 (panes) + 2 x 6 (spacing) + 2 x 1 (center-border)
  //,	noRoomToOpenAction:		"hide" // 'close' or 'hide' when no room to open a pane at minSize
});

$("#layout-config-opts").html( JSON.stringify($.layout.defaults, null, 2) );

});