jquery ui layout plugin

jquery ui layout plugin: basic with tabs

by Andy Blueman

HTML

<link rel="stylesheet" href="http://layout.jquery-dev.com/git/demos/css/jquery-ui.css">
<link rel="stylesheet" href="http://layout.jquery-dev.com/git/source/stable/layout-default.css">
<script src="http://layout.jquery-dev.com/git/source/jquery/jquery-1.11.1.js"></script>
<script src="http://layout.jquery-dev.com/git/source/jquery/jquery-ui-1.11.0.js"></script>
<script src="http://layout.jquery-dev.com/git/source/stable/jquery.layout.js"></script>
<script src="http://layout.jquery-dev.com/lib/js/themeswitchertool.js"></script>
<div class="ui-layout-north ui-widget-content add-padding">North</div> 
<div class="ui-layout-south ui-widget-content add-padding">South</div> 

<div id="tabs-center" class="ui-layout-center no-scrollbar add-padding grey">
	<!-- center Tabs layout -->
	<ul class="ui-layout-north no-scrollbar allow-overflow">
		<li><a href="#tab-panel-center-1">Tab 1</a></li>
		<li><a href="#tab-panel-center-2">Tab 2</a></li>
		<li><a href="#tab-panel-center-3">Tab 3</a></li>
	</ul>
	<div class="ui-layout-center ui-widget-content add-scrollbar" style="border-top: 0;">
		<div id="tab-panel-center-1" class="outline">
			<b>Tabs inside a nested-layout</b>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				Vestibulum condimentum neque a velit laoreet dapibus.</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 id="tab-panel-center-2" class="no-padding no-scrollbar"
		style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
			<!-- center Accordion layout -->
			<div class="ui-layout-center no-scrollbar add-padding">
				<div class="ui-widget-header add-padding" >
					ACCORDION HEADER
				</div>
				<div class="ui-layout-content no-scrollbar">
					<div id="accordion-center">
			
						<h3><a href="#">Section...

CSS

/* neutralize pane formatting BEFORE loading UI Theme */
	.ui-layout-pane ,
	.ui-layout-content {
		background:	none;
		border:		0;
		padding:	0;
		overflow:	visible;
	}
	p				{ margin:		1em 0; }

	/* use !important to override UI theme styles */
	.grey			{ background:	#999 !important; }
	.outline		{ /*border:		1px dashed #F00 !important;*/ }
	.add-padding	{ padding:		10px !important; }
	.no-padding		{ padding:		0 !important; }
	.add-scrollbar	{ overflow:		auto; }
	.no-scrollbar	{ overflow:		hidden; }
	.allow-overflow	{ overflow:		visible; }
	.full-height	{ height:		100%; }
	button			{ cursor:		pointer; }

JavaScript

$(document).ready(function () {

		// OUTER/PAGE LAYOUT
		pageLayout = $("body").layout({ // DO NOT use "var pageLayout" here
            east__size:			.50
		}); 

		// TABS IN CENTER-PANE
		pageLayout.panes.center.tabs({
			activate:			$.layout.callbacks.resizeTabLayout 
		});

		// WRAPPER-LAYOUT FOR TABS/TAB-PANELS, INSIDE OUTER-CENTER PANE
		pageLayout.panes.center.layout({
			closable:			false
		,	resizable:			false
		,	spacing_open:		0
		,	center__onresize:	$.layout.callbacks.resizeTabLayout 
		});

		// LAYOUT TO CONTAIN HEADER+ACCORDION, INSIDE A TAB, INSIDE OUTER-CENTER PANE
		$("#tab-panel-center-2").layout({
			center__onresize:	$.layout.callbacks.resizePaneAccordions
		,	resizeWithWindow:	false	
		,	triggerEventsOnLoad: true	
		});

		// TABS INSIDE EAST-PANE
		pageLayout.panes.east.tabs({
			activate:			$.layout.callbacks.resizePaneAccordions 
        });
		pageLayout.sizeContent("east"); 
    
		// INIT ALL ACCORDIONS - EVEN THOSE NOT VISIBLE
		$("#accordion-center")	.accordion({ heightStyle: "fill" });
		$("#accordion-east")	.accordion({ heightStyle: "fill" });

		// THEME SWITCHER
		addThemeSwitcher('#east-toolbar',{ top: '12px', right: '5px' });
		setTimeout( pageLayout.resizeAll, 2000 ); 
        
});