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