<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simple Layout Demo</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.ui.all.js"></script> <script type="text/javascript" src="jquery.layout.js"></script> <script type="text/javascript"> var myLayout; // a var is required because this page utilizes: myLayout.allowOverflow() method $(document).ready(function () { myLayout = $('body').layout({ // enable showOverflow on west-pane so popups will overlap north pane west__showOverflowOnHover: true //, west__fxSettings_open: { easing: "easeOutBounce", duration: 750 } }); }); </script> <style type="text/css"> /** * Basic Layout Theme * * This theme uses the default layout class-names for all classes * Add any 'custom class-names', from options: paneClass, resizerClass, togglerClass */ .ui-layout-pane { /* all 'panes' */ background: #FFF; border: 1px solid #BBB; padding: 10px; overflow: auto; } .ui-layout-resizer { /* all 'resizer-bars' */ background: #DDD; } .ui-layout-toggler { /* all 'toggler-buttons' */ background: #AAA; } </style> <style type="text/css"> /** * ALL CSS below is only for cosmetic and demo purposes * Nothing here affects the appearance of the layout */ body { font-family: Arial, sans-serif; font-size: 0.85em; } p { margin: 1em 0; } /* * Rules below are for simulated drop-down/pop-up lists */ ul { /* rules common to BOTH inner and outer UL */ z-index: 100000; margin: 1ex 0; padding: 0; list-style: none; cursor: pointer; border: 1px solid Black; /* rules for outer UL only */ width: 15ex; position: relative; } ul li { background-color: #EEE; padding: 0.15em 1em 0.3em 5px; } ul ul { display: none; position: absolute; width: 100%; left: -1px; /* Pop-Up */ bottom: 0; margin: 0; margin-bottom: 1.55em; } .ui-layout-north ul ul { /* Drop-Down */ bottom: auto; margin: 0; margin-top: 1.45em; } ul ul li { padding: 3px 1em 3px 5px; } ul ul li:hover { background-color: #FF9; } ul li:hover ul { display: block; background-color: #EEE; } </style> </head> <body> <!-- manually attach allowOverflow method to pane --> <div class="ui-layout-north" onmouseover="myLayout.allowOverflow('north')" onmouseout="myLayout.resetOverflow(this)"> This is the north pane, closable, slidable and resizable <ul> <li> <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> Drop-Down <!-- put this below so IE and FF render the same! --> </li> </ul> </div> <!-- allowOverflow auto-attached by option: west__showOverflowOnHover = true --> <div class="ui-layout-west"> This is the west pane, closable, slidable and resizable <ul> <li> <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> Pop-Up <!-- put this below so IE and FF render the same! --> </li> </ul> <p><button onclick="myLayout.close('west')">Close Me</button></p> </div> <div class="ui-layout-south"> This is the south pane, closable, slidable and resizable <button onclick="myLayout.toggle('north')">Toggle North Pane</button> </div> <div class="ui-layout-east"> This is the east pane, closable, slidable and resizable <!-- attach allowOverflow method to this specific element --> <ul onmouseover="myLayout.allowOverflow(this)" onmouseout="myLayout.resetOverflow('east')"> <li> <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> Pop-Up <!-- put this below so IE and FF render the same! --> </li> </ul> <p><button onclick="myLayout.close('east')">Close Me</button></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><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p> </div> <div class="ui-layout-center"> This center pane auto-sizes to fit the space <i>between</i> the 'border-panes' <p>This layout was created with only <b>default options</b> - no customization</p> <p>Only the <b>applyDefaultStyles</b> option was enabled for <i>basic</i> formatting</p> <p>The Pop-Up and Drop-Down lists demonstrate the <b>allowOverflow()</b> utility</p> <p>The Close and Toggle buttons are examples of <b>custom buttons</b></p> <p><a href="http://layout.jquery-dev.net/demos.html">Go to the Demos page</a></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><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p> </div> </body> </html>