| 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
|---|
| 2 | <html xmlns="http://www.w3.org/1999/xhtml">
|
|---|
| 3 | <head>
|
|---|
| 4 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|---|
| 5 |
|
|---|
| 6 | <title>Nested Layouts</title>
|
|---|
| 7 |
|
|---|
| 8 | <script type="text/javascript" src="jquery.js"></script>
|
|---|
| 9 | <script type="text/javascript" src="jquery.layout.js"></script>
|
|---|
| 10 | <script type="text/javascript" src="jquery.ui.all.js"></script>
|
|---|
| 11 |
|
|---|
| 12 | <script>
|
|---|
| 13 |
|
|---|
| 14 | var outerLayout, middleLayout, innerLayout;
|
|---|
| 15 |
|
|---|
| 16 | $(document).ready(function () {
|
|---|
| 17 |
|
|---|
| 18 | outerLayout = $('body').layout({
|
|---|
| 19 | center__paneSelector: ".outer-center"
|
|---|
| 20 | , west__paneSelector: ".outer-west"
|
|---|
| 21 | , east__paneSelector: ".outer-east"
|
|---|
| 22 | , west__size: 125
|
|---|
| 23 | , east__size: 125
|
|---|
| 24 | , spacing_open: 8 // ALL panes
|
|---|
| 25 | , spacing_closed: 12 // ALL panes
|
|---|
| 26 | , north__spacing_open: 0
|
|---|
| 27 | , south__spacing_open: 0
|
|---|
| 28 | , center__onresize: "middleLayout.resizeAll"
|
|---|
| 29 | });
|
|---|
| 30 |
|
|---|
| 31 | middleLayout = $('div.outer-center').layout({
|
|---|
| 32 | center__paneSelector: ".middle-center"
|
|---|
| 33 | , west__paneSelector: ".middle-west"
|
|---|
| 34 | , east__paneSelector: ".middle-east"
|
|---|
| 35 | , west__size: 100
|
|---|
| 36 | , east__size: 100
|
|---|
| 37 | , spacing_open: 8 // ALL panes
|
|---|
| 38 | , spacing_closed: 12 // ALL panes
|
|---|
| 39 | , center__onresize: "innerLayout.resizeAll"
|
|---|
| 40 | });
|
|---|
| 41 |
|
|---|
| 42 | innerLayout = $('div.middle-center').layout({
|
|---|
| 43 | center__paneSelector: ".inner-center"
|
|---|
| 44 | , west__paneSelector: ".inner-west"
|
|---|
| 45 | , east__paneSelector: ".inner-east"
|
|---|
| 46 | , west__size: 75
|
|---|
| 47 | , east__size: 75
|
|---|
| 48 | , spacing_open: 8 // ALL panes
|
|---|
| 49 | , spacing_closed: 8 // ALL panes
|
|---|
| 50 | , west__spacing_closed: 12
|
|---|
| 51 | , east__spacing_closed: 12
|
|---|
| 52 | });
|
|---|
| 53 |
|
|---|
| 54 | });
|
|---|
| 55 |
|
|---|
| 56 |
|
|---|
| 57 | </script>
|
|---|
| 58 |
|
|---|
| 59 | <style type="text/css">
|
|---|
| 60 |
|
|---|
| 61 | .ui-layout-pane { /* all 'panes' */
|
|---|
| 62 | padding: 10px;
|
|---|
| 63 | background: #FFF;
|
|---|
| 64 | border-top: 1px solid #BBB;
|
|---|
| 65 | border-bottom: 1px solid #BBB;
|
|---|
| 66 | }
|
|---|
| 67 | .ui-layout-pane-north ,
|
|---|
| 68 | .ui-layout-pane-south {
|
|---|
| 69 | border: 1px solid #BBB;
|
|---|
| 70 | }
|
|---|
| 71 | .ui-layout-pane-west {
|
|---|
| 72 | border-left: 1px solid #BBB;
|
|---|
| 73 | }
|
|---|
| 74 | .ui-layout-pane-east {
|
|---|
| 75 | border-right: 1px solid #BBB;
|
|---|
| 76 | }
|
|---|
| 77 | .ui-layout-pane-center {
|
|---|
| 78 | border-left: 0;
|
|---|
| 79 | border-right: 0;
|
|---|
| 80 | }
|
|---|
| 81 | .inner-center {
|
|---|
| 82 | border: 1px solid #BBB;
|
|---|
| 83 | }
|
|---|
| 84 |
|
|---|
| 85 | .outer-west ,
|
|---|
| 86 | .outer-east {
|
|---|
| 87 | background-color: #EEE;
|
|---|
| 88 | }
|
|---|
| 89 | .middle-west ,
|
|---|
| 90 | .middle-east {
|
|---|
| 91 | background-color: #F8F8F8;
|
|---|
| 92 | }
|
|---|
| 93 |
|
|---|
| 94 | .ui-layout-resizer { /* all 'resizer-bars' */
|
|---|
| 95 | background: #DDD;
|
|---|
| 96 | }
|
|---|
| 97 | .ui-layout-resizer:hover { /* all 'resizer-bars' */
|
|---|
| 98 | background: #FED;
|
|---|
| 99 | }
|
|---|
| 100 | .ui-layout-resizer-west {
|
|---|
| 101 | border-left: 1px solid #BBB;
|
|---|
| 102 | }
|
|---|
| 103 | .ui-layout-resizer-east {
|
|---|
| 104 | border-right: 1px solid #BBB;
|
|---|
| 105 | }
|
|---|
| 106 |
|
|---|
| 107 | .ui-layout-toggler { /* all 'toggler-buttons' */
|
|---|
| 108 | background: #AAA;
|
|---|
| 109 | }
|
|---|
| 110 | .ui-layout-toggler:hover { /* all 'toggler-buttons' */
|
|---|
| 111 | background: #FC3;
|
|---|
| 112 | }
|
|---|
| 113 |
|
|---|
| 114 | .outer-center ,
|
|---|
| 115 | .middle-center {
|
|---|
| 116 | /* center pane that are 'containers' for a nested layout */
|
|---|
| 117 | padding: 0;
|
|---|
| 118 | border: 0;
|
|---|
| 119 | }
|
|---|
| 120 |
|
|---|
| 121 | </style>
|
|---|
| 122 |
|
|---|
| 123 | </head>
|
|---|
| 124 | <body>
|
|---|
| 125 |
|
|---|
| 126 | <div class="outer-center">
|
|---|
| 127 |
|
|---|
| 128 | <div class="middle-center">
|
|---|
| 129 |
|
|---|
| 130 | <div class="inner-center">Inner Center</div>
|
|---|
| 131 | <div class="inner-west">Inner West</div>
|
|---|
| 132 | <div class="inner-east">Inner East</div>
|
|---|
| 133 | <div class="ui-layout-north">Inner North</div>
|
|---|
| 134 | <div class="ui-layout-south">Inner South</div>
|
|---|
| 135 |
|
|---|
| 136 | </div>
|
|---|
| 137 | <div class="middle-west">Middle West</div>
|
|---|
| 138 | <div class="middle-east">Middle East</div>
|
|---|
| 139 |
|
|---|
| 140 | </div>
|
|---|
| 141 |
|
|---|
| 142 | <div class="outer-west">Outer West</div>
|
|---|
| 143 | <div class="outer-east">Outer East</div>
|
|---|
| 144 |
|
|---|
| 145 | <div class="ui-layout-north">Outer North</div>
|
|---|
| 146 | <div class="ui-layout-south">Outer South</div>
|
|---|
| 147 |
|
|---|
| 148 | </body>
|
|---|
| 149 | </html>
|
|---|
| 150 |
|
|---|
