mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
197 lines
5.3 KiB
HTML
197 lines
5.3 KiB
HTML
|
<!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>
|