silverstripe-framework/thirdparty/jquery-layout/nested.html
2009-11-21 02:26:09 +00:00

151 lines
3.6 KiB
HTML
Executable File

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