jquery ui layout plugin

jquery ui layout plugin: basic with tabs

by Shashank D

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 id="tabs-center" class="ui-layout-center">
	<!-- 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>
    		<li><a href="#tab-panel-center-3">Tab 3</a></li>		<li><a href="#tab-panel-center-3">Tab 3</a></li>		<li><a href="#tab-panel-center-3">Tab 3</a></li>		<li><a href="#tab-panel-center-3">Tab 3</a></li>		<li><a href="#tab-panel-center-3">Tab 3</a></li>		<li><a href="#tab-panel-center-3">Tab 3</a></li>		<li><a href="#tab-panel-center-3">Tab 3</a></li>		<li><a href="#tab-panel-center-3">Tab 3</a></li>		<li><a href="#tab-panel-center-3">Tab 3</a></li>		<li><a href="#tab-panel-center-3">Tab 3</a></li>		<li><a href="#tab-panel-center-3">Tab 3</a></li>		<li><a href="#tab-panel-center-3">Tab 3</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>
	<!-- /center Tabs layout -->
</div>


  <div id="tabs-east" class="ui-layout-east no-padding no-scrollbar">

        
	</div>

JavaScript

$(document).ready(function () {

		// OUTER/PAGE LAYOUT
		pageLayout = $("body").layout({ // DO NOT use "var pageLayout" here
            west__size: 0.25,
            east__size: 0.75,
            height: 200
		}); 

        
});