Subversion Repositories Applications.papyrus

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
2150 mathias 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2
<html>
3
<head>
4
	<title>dijit.layout.LayoutContainer Test</title>
5
 
6
	<style type="text/css">
7
		@import "../../../dojo/resources/dojo.css";
8
		@import "../../themes/tundra/tundra.css";
9
	</style>
10
 
11
	<script type="text/javascript" src="../../../dojo/dojo.js"
12
		djConfig="isDebug: true, parseOnLoad: true"></script>
13
 
14
	<script type="text/javascript">
15
		dojo.require("dijit.layout.LayoutContainer");
16
		dojo.require("dijit.layout.ContentPane");
17
		dojo.require("dijit.form.FilteringSelect");
18
		dojo.require("dojo.parser");	// scan page for widgets and instantiate them
19
	</script>
20
 
21
</head>
22
<body class="tundra">
23
<h2>Dijit layout.LayoutContainer tests</h2>
24
<p>Basic layout. Tabindex=&quot;0&quot; added to each pane to test for tab order matching source code order.  Tab order
25
should be:  left, right, top, middle/main, bottom</p>
26
 
27
<div dojoType="dijit.layout.LayoutContainer"
28
	style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"
29
>
30
	<div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #acb386; width: 100px;" tabindex="0">
31
		left
32
	</div>
33
	<div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #acb386;"  tabindex="0">
34
		right
35
	</div>
36
	<div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #b39b86; "  tabindex="0">
37
		top bar
38
	</div>
39
	<div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px;"  tabindex="0">
40
		main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
41
		(to check we're copying children around properly).<br />
42
		<select dojoType="dijit.form.FilteringSelect">
43
			<option value="1">foo</option>
44
			<option value="2">bar</option>
45
			<option value="3">baz</option>
46
		</select>
47
		Here's some text that comes AFTER the combo box.
48
	</div>
49
 
50
	<div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #b39b86;"  tabindex="0">
51
		bottom bar
52
	</div>
53
 
54
</div>
55
 
56
<p>Advanced layout. Tabindex=&quot;0&quot; added to each pane to test for tab order matching source code order.  Tab order
57
should be:  left, top, bottom, inner left, inner middle, inner right. This is not an ideal tab order. See below to use nested
58
layout containers to achieve a tab order which matches presentation and source code order.</p>
59
<div dojoType="dijit.layout.LayoutContainer"
60
	style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"
61
>
62
	<div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #acb386; width: 100px; margin: 5px;" tabindex="0">
63
		left
64
	</div>
65
	<div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #b39b86;  margin: 5px;" tabindex="0">
66
		top bar
67
	</div>
68
	<div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #b39b86; margin: 5px;" tabindex="0">
69
 
70
		bottom bar
71
	</div>
72
	<div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0">
73
		inner left
74
	</div>
75
 
76
	<div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px; margin: 5px;" tabindex="0">
77
		main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
78
 
79
		(to check we're copying children around properly).<br />
80
		<select dojoType="dijit.form.FilteringSelect">
81
			<option value="1">foo</option>
82
			<option value="2">bar</option>
83
			<option value="3">baz</option>
84
		</select>
85
		Here's some text that comes AFTER the combo box.
86
	</div>
87
	<div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0">
88
		inner right
89
	</div>
90
</div>
91
 
92
<p>Advanced layout with nested containers.  Tabindex=&quot;0&quot; added to content panes to show tab order. Order should be:
93
left, top, inner left, inner middle, inner right, bottom. This is the preferred tab order for this type of layout.</p>
94
<div dojoType="dijit.layout.LayoutContainer"
95
	style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"
96
>
97
	<div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #acb386; width: 100px; margin: 5px;" tabindex="0">
98
		left
99
	</div>
100
	<div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="margin: 5px;" >
101
		<div dojoType="dijit.layout.LayoutContainer"	style="height:90%;border: 2px solid black;padding: 10px;">
102
 
103
			<div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #b39b86;  margin: 5px;" tabindex="0">
104
				top bar
105
			</div>
106
			<div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="margin: 5px;">
107
				<div dojoType="dijit.layout.LayoutContainer"	style="height:80%;border: 2px solid black;padding: 10px;">
108
					<div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0">
109
						inner left
110
					</div>
111
					<div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px; margin: 5px;" tabindex="0">
112
						main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
113
						(to check we're copying children around properly).<br />
114
						<select dojoType="dijit.form.FilteringSelect">
115
							<option value="1">foo</option>
116
							<option value="2">bar</option>
117
							<option value="3">baz</option>
118
						</select>
119
						Here's some text that comes AFTER the combo box.
120
					</div>
121
					<div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0">
122
						inner right
123
					</div>
124
				</div>
125
			</div>
126
			<div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #b39b86; margin: 5px;" tabindex="0"	>
127
				bottom bar
128
			</div>
129
		</div>
130
	</div>
131
</div>
132
 
133
<p>Goofy spiral layout.  Match of source code order to tab order can not be achieved with this type of layout.</p>
134
<div dojoType="dijit.layout.LayoutContainer"
135
	style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"
136
>
137
	<div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #663333; color: white; width: 100px;">
138
		outer left
139
	</div>
140
	<div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #333366; color: white; height: 50px;">
141
		outer top
142
	</div>
143
	<div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #663333; color: white; width: 100px;">
144
		outer right
145
	</div>
146
	<div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #333366; color: white; height: 50px;">
147
		outer bottom
148
	</div>
149
	<div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #99CC99; width: 100px;">
150
		inner left
151
	</div>
152
	<div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #999966; height: 50px;">
153
		inner top
154
	</div>
155
	<div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #99CC99; width: 100px;">
156
		inner right
157
	</div>
158
	<div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #999966; height: 50px;">
159
		inner bottom
160
	</div>
161
	<div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="padding: 10px;">
162
		main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
163
		(to check we're copying children around properly).<br />
164
		<select dojoType="dijit.form.FilteringSelect">
165
			<option value="1">foo</option>
166
			<option value="2">bar</option>
167
			<option value="3">baz</option>
168
		</select>
169
		Here's some text that comes AFTER the combo box.
170
	</div>
171
</div>
172
 
173
</body>
174
</html>