mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
151 lines
3.6 KiB
HTML
151 lines
3.6 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>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||
|
|
|
||
|
|
<title>Nested Layouts</title>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="jquery.js"></script>
|
||
|
|
<script type="text/javascript" src="jquery.layout.js"></script>
|
||
|
|
<script type="text/javascript" src="jquery.ui.all.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var outerLayout, middleLayout, innerLayout;
|
||
|
|
|
||
|
|
$(document).ready(function () {
|
||
|
|
|
||
|
|
outerLayout = $('body').layout({
|
||
|
|
center__paneSelector: ".outer-center"
|
||
|
|
, west__paneSelector: ".outer-west"
|
||
|
|
, east__paneSelector: ".outer-east"
|
||
|
|
, west__size: 125
|
||
|
|
, east__size: 125
|
||
|
|
, spacing_open: 8 // ALL panes
|
||
|
|
, spacing_closed: 12 // ALL panes
|
||
|
|
, north__spacing_open: 0
|
||
|
|
, south__spacing_open: 0
|
||
|
|
, center__onresize: "middleLayout.resizeAll"
|
||
|
|
});
|
||
|
|
|
||
|
|
middleLayout = $('div.outer-center').layout({
|
||
|
|
center__paneSelector: ".middle-center"
|
||
|
|
, west__paneSelector: ".middle-west"
|
||
|
|
, east__paneSelector: ".middle-east"
|
||
|
|
, west__size: 100
|
||
|
|
, east__size: 100
|
||
|
|
, spacing_open: 8 // ALL panes
|
||
|
|
, spacing_closed: 12 // ALL panes
|
||
|
|
, center__onresize: "innerLayout.resizeAll"
|
||
|
|
});
|
||
|
|
|
||
|
|
innerLayout = $('div.middle-center').layout({
|
||
|
|
center__paneSelector: ".inner-center"
|
||
|
|
, west__paneSelector: ".inner-west"
|
||
|
|
, east__paneSelector: ".inner-east"
|
||
|
|
, west__size: 75
|
||
|
|
, east__size: 75
|
||
|
|
, spacing_open: 8 // ALL panes
|
||
|
|
, spacing_closed: 8 // ALL panes
|
||
|
|
, west__spacing_closed: 12
|
||
|
|
, east__spacing_closed: 12
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
|
||
|
|
.ui-layout-pane { /* all 'panes' */
|
||
|
|
padding: 10px;
|
||
|
|
background: #FFF;
|
||
|
|
border-top: 1px solid #BBB;
|
||
|
|
border-bottom: 1px solid #BBB;
|
||
|
|
}
|
||
|
|
.ui-layout-pane-north ,
|
||
|
|
.ui-layout-pane-south {
|
||
|
|
border: 1px solid #BBB;
|
||
|
|
}
|
||
|
|
.ui-layout-pane-west {
|
||
|
|
border-left: 1px solid #BBB;
|
||
|
|
}
|
||
|
|
.ui-layout-pane-east {
|
||
|
|
border-right: 1px solid #BBB;
|
||
|
|
}
|
||
|
|
.ui-layout-pane-center {
|
||
|
|
border-left: 0;
|
||
|
|
border-right: 0;
|
||
|
|
}
|
||
|
|
.inner-center {
|
||
|
|
border: 1px solid #BBB;
|
||
|
|
}
|
||
|
|
|
||
|
|
.outer-west ,
|
||
|
|
.outer-east {
|
||
|
|
background-color: #EEE;
|
||
|
|
}
|
||
|
|
.middle-west ,
|
||
|
|
.middle-east {
|
||
|
|
background-color: #F8F8F8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui-layout-resizer { /* all 'resizer-bars' */
|
||
|
|
background: #DDD;
|
||
|
|
}
|
||
|
|
.ui-layout-resizer:hover { /* all 'resizer-bars' */
|
||
|
|
background: #FED;
|
||
|
|
}
|
||
|
|
.ui-layout-resizer-west {
|
||
|
|
border-left: 1px solid #BBB;
|
||
|
|
}
|
||
|
|
.ui-layout-resizer-east {
|
||
|
|
border-right: 1px solid #BBB;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui-layout-toggler { /* all 'toggler-buttons' */
|
||
|
|
background: #AAA;
|
||
|
|
}
|
||
|
|
.ui-layout-toggler:hover { /* all 'toggler-buttons' */
|
||
|
|
background: #FC3;
|
||
|
|
}
|
||
|
|
|
||
|
|
.outer-center ,
|
||
|
|
.middle-center {
|
||
|
|
/* center pane that are 'containers' for a nested layout */
|
||
|
|
padding: 0;
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="outer-center">
|
||
|
|
|
||
|
|
<div class="middle-center">
|
||
|
|
|
||
|
|
<div class="inner-center">Inner Center</div>
|
||
|
|
<div class="inner-west">Inner West</div>
|
||
|
|
<div class="inner-east">Inner East</div>
|
||
|
|
<div class="ui-layout-north">Inner North</div>
|
||
|
|
<div class="ui-layout-south">Inner South</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="middle-west">Middle West</div>
|
||
|
|
<div class="middle-east">Middle East</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="outer-west">Outer West</div>
|
||
|
|
<div class="outer-east">Outer East</div>
|
||
|
|
|
||
|
|
<div class="ui-layout-north">Outer North</div>
|
||
|
|
<div class="ui-layout-south">Outer South</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|