<!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>
|
Download
