jQuery Layout
Reference: http://layout.jquery-dev.net/
HTML
<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<div class="ui-layout-center">Center</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West
<br/>
<br/>
<button id="eastToggle">Toggle East Pane</button>
<br/>
<br/>
<button id="attempt">Change Width?</button>
</div>
JavaScript
$('body').layout({
applyDefaultStyles: true,
east: {
spacing_closed: 100, //toggler width
spacing_open: 100,
togglerLength_closed: 200, //toggler height (length)
togglerLength_open: 200,
}
});
$("#eastToggle").click(function () {
var testLayout = $('body').layout();
testLayout.toggle('east');
});
$("#attempt").click(function () {
var testLayout = $('body').layout();
//is it possible to change the height/width (or even other attributes) of the toggler?
testLayout.east.spacing_open = 20; //something like this ??
});