1 | <html> |
---|
2 | <head> |
---|
3 | <style> |
---|
4 | body{ |
---|
5 | background-color:#EEEEEE; |
---|
6 | margin:0px; padding:0px; |
---|
7 | } |
---|
8 | div{ |
---|
9 | margin:0px; padding:0px; |
---|
10 | } |
---|
11 | .contentArea { |
---|
12 | position: relative; |
---|
13 | float:left; |
---|
14 | margin:0px; padding:0px; |
---|
15 | border: 1px dashed #336699; |
---|
16 | background-color: #99CCFF; |
---|
17 | overflow:visible; |
---|
18 | } |
---|
19 | .content { |
---|
20 | position:absolute; |
---|
21 | float:left; |
---|
22 | overflow:auto; |
---|
23 | } |
---|
24 | .contentGroup{ |
---|
25 | position: absolute; |
---|
26 | float:left; |
---|
27 | margin:0px; padding:0px; |
---|
28 | border: 1px solid #336699; |
---|
29 | background-color: transparent; |
---|
30 | overflow:visible; |
---|
31 | } |
---|
32 | .contentGroup_hover{ |
---|
33 | background-color: red; |
---|
34 | } |
---|
35 | .moveButton |
---|
36 | { |
---|
37 | cursor:move; |
---|
38 | background-color: #3399CC; |
---|
39 | position:absolute; |
---|
40 | width:16; height:16; |
---|
41 | margin:0px; padding:0px; |
---|
42 | } |
---|
43 | </style> |
---|
44 | <script type="text/javascript" src="jquery-1.2.6.js"></script> |
---|
45 | <script type="text/javascript" src="jquery.ui.all.js"></script> |
---|
46 | <script type="text/javascript" > |
---|
47 | function draggableResize(e, ui){ |
---|
48 | var parent = ui.element.parent().get(0); |
---|
49 | ui.element.css("width", (ui.element.width() / $(parent).width() * 100) + "%"); |
---|
50 | |
---|
51 | ui.element.children('.contentGroup,.content').each(function(){ |
---|
52 | $(this).width("99%"); |
---|
53 | $(this).height(ui.size.height-25); |
---|
54 | }); |
---|
55 | } |
---|
56 | function sortComplete(e, ui){ |
---|
57 | //this is part of a fix required for jQuery UI 1.5.2 - see below |
---|
58 | $('.contentArea').resizable({ autoHide: true, resize:draggableResize}); |
---|
59 | } |
---|
60 | $(document).ready(function(){ |
---|
61 | //resize and sorting are not compatible |
---|
62 | $('.contentArea').resizable({ autoHide: true, resize:draggableResize}); |
---|
63 | $('.contentGroup').sortable({items:'.contentArea', handle:'.moveButton', connectWith:['.contentGroup'], opacity:'.5', stop:sortComplete}); |
---|
64 | |
---|
65 | //the following handlers are required because resizable elements cannot be part of a sortable group. (jQuery UI 1.5.2) |
---|
66 | // resizing works without this, but the sortables do not work when contained elements are resizable |
---|
67 | $('.moveButton').bind("mouseenter", function(e){ |
---|
68 | $('.contentArea').resizable("destroy"); |
---|
69 | }); |
---|
70 | $('.moveButton').bind("mouseout", function(e){ |
---|
71 | $('.contentArea').resizable({ autoHide: true, resize:draggableResize}); |
---|
72 | }); |
---|
73 | }); |
---|
74 | </script> |
---|
75 | </head> |
---|
76 | <body> |
---|
77 | <div class="contentGroup" id="GRP_0" style="width:100%"> |
---|
78 | |
---|
79 | <div id="CA_4" class="contentArea" style="width:99%;height:200;"> |
---|
80 | <div id="CA_4_M" class="moveButton" style="width:16;"></div> |
---|
81 | <div id="GRP_4" class="contentGroup" style="left:0;top:16;width:99%;height:180"> |
---|
82 | <div id="CA_5" class="contentArea" style="width:80%;height:100;"> |
---|
83 | <div id="CA_5_M" class="moveButton" style="width:16;"></div> |
---|
84 | <div id="CA_5_C" class="content" style="left:0;top:16;width:99%;height:80"> |
---|
85 | Header Content Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah... |
---|
86 | </div> |
---|
87 | </div> |
---|
88 | </div> |
---|
89 | </div> |
---|
90 | |
---|
91 | <div id="CA_2" class="contentArea" style="width:20%;height:400;"> |
---|
92 | <div id="CA_2_M" class="moveButton" style="width:16;"></div> |
---|
93 | <div id="GRP_2" class="contentGroup" style="left:0;top:16;width:99%;height:380"> |
---|
94 | <div id="CA_1" class="contentArea" style="width:98%;height:100;"> |
---|
95 | <div id="CA_1_M" class="moveButton" style="width:16;"></div> |
---|
96 | <div id="CA_1_C" class="content" style="left:0;top:16;width:99%;height:80"> |
---|
97 | This is the side bar content. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah... |
---|
98 | </div> |
---|
99 | </div> |
---|
100 | </div> |
---|
101 | </div> |
---|
102 | |
---|
103 | <div id="CA_3" class="contentArea" style="width:79%;height:400;"> |
---|
104 | <div id="CA_3_M" class="moveButton" style="width:16;"></div> |
---|
105 | <div id="CA_3_C" class="content" style="left:0;top:16;width:99%;height:380"> |
---|
106 | This is the main body content. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah... |
---|
107 | </div> |
---|
108 | </div> |
---|
109 | </div> |
---|
110 | </body> |
---|
111 | </html> |
---|