Login   Register  
Icontem

File: src/plugins/splitpane/demo.html

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Jonathan Gotti  >  jQuery Toolkit  >  src/plugins/splitpane/demo.html  >  Download  
File: src/plugins/splitpane/demo.html
Role: Example script
Content type: text/plain
Description: Documentation
Class: jQuery Toolkit
Create widgets reading options from CSS classes
Author: By
Last change:
Date: 2014-02-03 15:25
Size: 2,115 bytes
 

Contents

Class file image Download
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../jquery.toolkit.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="../../jquery.toolkit.js" type="text/javascript"></script>
<script src="../../jquery.toolkit.storage.js" type="text/javascript"></script>
<script src="jquery.tk.splitpane.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="jquery.tk.splitpane.css" />
<style type="text/css">
body{ text-align:center; font-size:12px;}
#layout{ margin:auto; text-align:left;width:750px;height:400px;}
h1{ font-size:1.4em;}
h2{ font-size:1.2em;}
h3{ font-size:1.1em;}

</style>
<script>
//localStorage.clear();
$(function(){ $.toolkit.initPlugins('splitpane');});
</script>
</head>
<body>
	<div id="layout" class="tk-splitpane">
		<div class="tk-splitpane-pane-0-150-75">
			<h1>Top Pane</h1>
			This is a demo for jqueryToolkit splitpane plugin. This pane is constraint between 50px to 75px;
		</div>
		<div class="tk-splitpane tk-splitpane-horizontal">
			<div class="tk-splitpane-pane-150-0-200">
				<h2>Left Pane</h2>
				<p>This pane min size is 150px, but there's no max value. The initial opening size would be 200px.</p>
			</div><div>
				<h2>Center Pane</h2>
				<p>This is the main pane of the horizontal splitpane (which in turn is the main pane of it's parent vertical splitpane).</p>
				<p>
					It will keep panes sizes and state (opened/closed) stored even if you close your browser so when you will come again it will start in the state you left it.
					<br>
					This is possible by the integration of the toolkit.storage utility.
				</p>
			</div><div class="tk-splitpane-pane-50-150-closed">
				<h2>right pane</h2>
				<p>This paned is contained between 50px and 150px, and is closed on your first visit.</p>
			</div>
		</div>
		<div class="tk-splitpane-pane-closed-100">
			<h2>bottom pane</h2>
			<p>
				This pane is closed the first time you visit the page and will open to a size of 100 on the first time
			</p>
		</div>
	</div>
</body>
</html>