Context Navigation

source: Dev/branches/rest-dojo-ui/client/dijit/tests/test_Dialog.html @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago
Reworked project structure based on REST interaction and Dojo library. As soon as this is stable, the old jQueryUI branch can be removed (it's kept for reference).
File size: 30.1 KB

Line
1	<!DOCTYPE html>
2	<html>
3	<head>
4	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
5	<title>Dialog Widget Dojo Tests</title>
6
7	<style type="text/css">
8	@import "../themes/claro/document.css";
9	@import "css/dijitTests.css";
10
11	form { margin-bottom : 0; }
12	table { border: none; }
13	#dialog3_underlay { background-color: #027 }
14	#fifthDlg_underlay { background-color: yellow; }
15	</style>
16
17	<!-- required: a default dijit theme: -->
18	<link id="themeStyles" rel="stylesheet" href="../../dijit/themes/claro/claro.css"/>
19
20	<!-- required: dojo.js -->
21	<script type="text/javascript" src="../../dojo/dojo.js"
22	data-dojo-config="parseOnLoad: true, isDebug: true"></script>
23
24	<!-- not needed, for testing alternate themes -->
25	<script type="text/javascript" src="_testCommon.js"></script>
26
27
28	<script type="text/javascript">
29	dojo.require("dijit.dijit"); // optimize: load dijit layer
30	dojo.require("dijit.Dialog");
31	dojo.require("dijit.form.Button");
32	dojo.require("dijit.form.TextBox");
33	dojo.require("dijit.form.DateTextBox");
34	dojo.require("dijit.form.TimeTextBox");
35	dojo.require("dijit.form.FilteringSelect");
36	dojo.require("dijit.layout.BorderContainer");
37	dojo.require("dijit.layout.ContentPane");
38	dojo.require("dijit.layout.TabContainer");
39	dojo.require("dijit.InlineEditBox");
40	dojo.require("dijit.Menu");
41	dojo.require("dojo.parser"); // scan page for widgets and instantiate them
42
43	// make dojo.toJson() print dates correctly (this feels a bit dirty)
44	Date.prototype.json = function(){ return dojo.date.stamp.toISOString(this, {selector: 'date'});};
45
46	var thirdDlg;
47	function createDialog(){
48	if(!thirdDlg){
49	var pane = dojo.byId('thirdDialog');
50	// should specify a width on dialogs with <p> tags, otherwise they get too wide
51	thirdDlg = new dijit.Dialog({
52	id: "dialog3",
53	title: "Programatic Dialog Creation",
54	style: {width: '300px'}
55	},pane);
56	}
57	setTimeout(function(){ thirdDlg.show(); },"3000");
58	}
59
60	function open2Dialogs(){
61	dijit.byId('dialog1').show();
62	setTimeout(dojo.hitch(dijit.byId('fifthDlg'), 'show'), 1000);
63	}
64
65	function showSelfDestructDlg(){
66	//for testing #12436
67	var dlg = new dijit.Dialog({
68	id: 'SelfDestructDlg',
69	title: 'Self-Destruct Dialog',
70	content: 'This dialog will destroy itself onHide.<br/><input type="text" id="SelfDestructDlgInput" />',
71	onHide: function(){
72	this.destroyRecursive();
73	}
74	});
75	dlg.show();
76	}
77	</script>
78	</head>
79	<body class="claro">
80
81	<h1 class="testTitle">Dijit layout.Dialog tests</h1>
82	<button id="dialog1button" data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ dijit.byId("dialog1").show() }'>Show Dialog</button> \|
83
84	<div id="dialog1" data-dojo-type="dijit.Dialog" data-dojo-props='title:"First Dialog",
85	"aria-describedby":"intro",
86	onFocus:function(){ console.log("user focus handler") },
87	onBlur:function(){ console.log("user blur handler") },
88	execute:function(args){ console.log("submitted w/args:\n" + dojo.toJson(args, true)); }'>
89	<div id="intro" style="width:30em;">Introductory information spoken by screen reader if aria-describedby is
90	added to the declaration of dialog above with value equal to the id of the container element for this text. This technique
91	will work in Dojo 1.4. </div>
92	<table style="position:relative;">
93	<tr>
94	<td><label for="name">Name: </label></td>
95	<td><input id="name" data-dojo-type="dijit.form.TextBox" data-dojo-props='type:"text", name:"name" '/></td>
96	</tr>
97	<tr>
98	<td><label for="loc">Location: </label></td>
99	<td><input id="loc" data-dojo-type="dijit.form.TextBox" data-dojo-props='type:"text", name:"loc" '/></td>
100	</tr>
101	<tr>
102	<td><label for="date">Date: </label></td>
103	<td><input id="date" data-dojo-type="dijit.form.DateTextBox" data-dojo-props='type:"text", name:"date" '/></td>
104	</tr>
105	<tr>
106	<td><label>Time: </label></td>
107	<td><div id="time" data-dojo-type="dijit.InlineEditBox" data-dojo-props='editor:"dijit.form.TimeTextBox", editorParams:{type:"text", name:"time"}, width:"100px", style:"width:100px;"'></div></td>
108	</tr>
109	<tr>
110	<td><label for="desc">Description: </label></td>
111	<td><input id="desc" data-dojo-type="dijit.form.TextBox" data-dojo-props='type:"text", name:"desc" '/></td>
112	</tr>
113	<tr>
114	<td colspan="2" style="text-align:center;">
115	<button id="ok" data-dojo-type="dijit.form.Button" data-dojo-props='type:"submit"'>OK</button></td>
116	</tr>
117	</table>
118	</div>
119
120
121	<button data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ createDialog() }, title:"shows after 3 second delay, with blue background"'>Programatic Dialog (3 second delay)</button> \|
122
123
124	<div id="thirdDialog" style="display: none;">
125	<form>
126	<input>
127	<br>
128	<button>hello</button>
129	<br>
130	<select>
131	<option>Lorem</option>
132	<option>ipsum</option>
133	<option>dolor</option>
134	<option>sit</option>
135	<option>amet</option>
136	</select>
137	</form>
138	<p>
139	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
140	semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
141	porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
142	Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
143	Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
144	risus.
145	</p>
146	</div>
147
148	<button data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ dijit.byId("tabDialog").show() }'>Show TabContainer Dialog</button> \|
149
150	<div id="tabDialog" data-dojo-type="dijit.Dialog" data-dojo-props='title:"TabContainer Dialog"'>
151	<div id="tc" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"width: 400px; height: 400px;"'>
152	<div id="cp1" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"First tab"'>
153	<p>
154	This is the first tab.
155	</p>
156	<p>
157	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
158	semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
159	porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
160	Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
161	Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
162	risus.
163	</p>
164	</div>
165	<div id="cp2" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Second tab"'>
166	<p>
167	This is the second tab.
168	</p>
169	<p>
170	Make it overflow. <a href="http://www.lipsum.com/">ipsum dolor sit amet</a>, consectetuer adipiscing elit. Aenean
171	semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
172	porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
173	Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
174	Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
175	risus.
176	</p>
177	<p>
178	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
179	semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
180	porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
181	Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
182	Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
183	risus.
184	</p>
185	<p>
186	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
187	semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
188	porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
189	Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
190	Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
191	risus.
192	</p>
193	</div>
194	</div>
195	</div>
196
197	<button data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ dijit.byId("fifthDlg").show(); }'>Test slow loading HREF Dialog</button> \|
198
199	<div id="fifthDlg" data-dojo-type="dijit.Dialog" data-dojo-props='href:"layout/getResponse.php?delay=3000&messId=3",
200	style:"width: 300px", title:"From HREF (slow network simulated)"'></div>
201
202	<button id="filebutton" data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ dijit.byId("file").show() }'>Show File Dialog</button>
203
204	<div id="file" data-dojo-type="dijit.Dialog" data-dojo-props='title:"File Dialog",
205	onFocus:function(){ console.log("user focus handler") },
206	onBlur:function(){ console.log("user blur handler") },
207	execute:function(args){ alert("submitted w/args:\n" + dojo.toJson(args, true)); }, style:"min-width: 350px"'>
208	<!-- note: style="min-width: 350px" to workaround FF bug where width is too short, see http://bugs.dojotoolkit.org/ticket/5976 -->
209	<label for="afile">ID File: </label>
210	<input id="afile" data-dojo-type="dijit.form.TextBox" data-dojo-props='type:"file", name:"afile" '/>
211	</div>
212
213	<button id="unmovablebutton" data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ dijit.byId("unmovable").show() }'>Show Unmovable</button>
214
215	<div id="unmovable" data-dojo-type="dijit.Dialog" data-dojo-props='title:"unmovable", draggable:false'>
216	<p>You should not be able to <br /> drag this dialog</p>
217	</div>
218
219	<button data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ dijit.byId("preventer").show() }'>Show Close prevention</button>
220
221	<div id="preventer" data-dojo-type="dijit.Dialog" data-dojo-props='title:"Confirm Close"'>
222	I am done entering data:
223	<button id="preventerOK" data-dojo-type="dijit.form.Button" data-dojo-props='type:"submit", onClick:function(){ return confirm("Are you sure?") }'>OK</button>
224	</div>
225
226	<button data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ dijit.byId("embedded").show() }'>Dialog w/embedded layout widgets</button> \|
227
228	<div id="embedded" data-dojo-type="dijit.Dialog" data-dojo-props='title:"Embedded layout widgets",
229	onShow:function(){ this.domNode.setAttribute("aria-describedby", "describe"); } '>
230	<p id="describe">
231	The pane has some text, plus two embedded layout widgets, which should
232	appear correctly even though the pane is initially hidden.
233	</p>
234	<p>
235	Here's a BorderContainer:
236	</p>
237	<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props='style:"height:200px; width:300px"'>
238	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='region:"left", style:"width:100px", splitter:true'>
239	1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
240	Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
241	vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
242	augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
243	metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
244	ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
245	euismod, magna nulla viverra libero, sit amet lacinia odio diam id
246	risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
247	porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
248	faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
249	consequat quis, varius interdum, nulla. Donec neque tortor,
250	sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
251	ut eros sit amet ante pharetra interdum.
252	</div>
253	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='region:"center"'>
254	2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
255	Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
256	vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
257	augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
258	metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
259	ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
260	euismod, magna nulla viverra libero, sit amet lacinia odio diam id
261	risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
262	porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
263	faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
264	consequat quis, varius interdum, nulla. Donec neque tortor,
265	sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
266	ut eros sit amet ante pharetra interdum.
267	</div>
268	</div>
269	<p>
270	And a TabContainer:
271	</p>
272	<div data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"height:200px; width:300px"'>
273	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Tab 1"'>
274	1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
275	Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
276	vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
277	augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
278	metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
279	ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
280	euismod, magna nulla viverra libero, sit amet lacinia odio diam id
281	risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
282	porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
283	faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
284	consequat quis, varius interdum, nulla. Donec neque tortor,
285	sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
286	ut eros sit amet ante pharetra interdum.
287	</div>
288	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Tab 2"'>
289	2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
290	Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
291	vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
292	augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
293	metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
294	ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
295	euismod, magna nulla viverra libero, sit amet lacinia odio diam id
296	risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
297	porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
298	faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
299	consequat quis, varius interdum, nulla. Donec neque tortor,
300	sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
301	ut eros sit amet ante pharetra interdum.
302	</div>
303	</div>
304	<p>
305	Text after the widgets.
306	</p>
307	</div>
308
309
310	<!-- Action Bar test case -->
311	<button id="ABDlg1Btn" data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ dijit.byId("ABDlg1").show() }'>Show Dialog With Action Buttons</button>
312	<div id="ABDlg1" data-dojo-type="dijit.Dialog" data-dojo-props='title:"ActionBar Dialog 1",
313	onExecute:function(){ console.log("OK button pressed") },
314	onCancel:function(){ console.log("Cancel button pressed") },
315	"aria-describedby":"intro",
316	execute:function(args){ console.log("submitted w/args:\n" + dojo.toJson(args, true)); }'>
317	<div class="dijitDialogPaneContentArea">
318	<div id="ABintro1" style="width:30em;">Introductory information spoken by screen reader if aria-describedby is
319	added to the declaration of dialog above with value equal to the id of the container element for this text. This technique
320	will work in Dojo 1.4. </div>
321	</div>
322
323
324	<div class="dijitDialogPaneActionBar">
325	<button id="ABdialog1button1" data-dojo-type="dijit.form.Button" data-dojo-props='type:"submit" '>OK</button>
326	<button id="ABdialog1button2" data-dojo-type="dijit.form.Button" data-dojo-props='type:"button", onClick:function(){ dijit.byId("ABDlg1").onCancel(); }
327	'>Cancel</button>
328	</div>
329	</div>
330
331	<button id="NABDlgBtn" data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ dijit.byId("NABDlg").show() }'>Show Dialog With No Action Buttons</button>
332	<div id="NABDlg" data-dojo-type="dijit.Dialog" data-dojo-props='title:"No Action Bar Dialog",
333	"aria-describedby":"intro",
334	onFocus:function(){ console.log("user focus handler") },
335	onBlur:function(){ console.log("user blur handler") },
336	execute:function(args){ console.log("submitted w/args:\n" + dojo.toJson(args, true)); }'>
337
338	<div class="dijitDialogPaneContentArea">
339	<div id="NABintro" style="width:30em;">Introductory information spoken by screen reader if aria-describedby is
340	added to the declaration of dialog above with value equal to the id of the container element for this text. This technique
341	will work in Dojo 1.4. </div>
342	<table>
343	<tr>
344	<td><label for="NABname">Name: </label></td>
345	<td><input id="NABname" data-dojo-type="dijit.form.TextBox" data-dojo-props='type:"text", name:"NABname" '/></td>
346	</tr>
347	<tr>
348	<td><label for="NABloc">Location: </label></td>
349	<td><input id="NABloc" data-dojo-type="dijit.form.TextBox" data-dojo-props='type:"text", name:"NABloc" '/></td>
350	</tr>
351	<tr>
352	<td><label for="NABdate">Date: </label></td>
353	<td><input id="NABdate" data-dojo-type="dijit.form.DateTextBox" data-dojo-props='type:"text", name:"NABdate" '/></td>
354	</tr>
355	<tr>
356	<td><label for="NABdesc">Description: </label></td>
357	<td><input id="NABdesc" data-dojo-type="dijit.form.TextBox" data-dojo-props='type:"text", name:"NABdesc" '/></td>
358	</tr>
359	</table>
360	</div>
361	</div>
362
363
364	<button id="layeredDialogs" data-dojo-type="dijit.form.Button" data-dojo-props='onClick:open2Dialogs'>Show 2 Dialogs</button>
365
366	<button id="iframeDlg" data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ dijit.byId("dlgFrame").show(); }'>Show iframe in dialog</button>
367	<div id="dlgFrame" data-dojo-type="dijit.Dialog" data-dojo-props='title:"Search"'>
368	<iframe title="Test IFrame" src="layout/getResponse.php?delay=3000&messId=3" style="width:600px; height: 400px;">
369	</iframe>
370
371	</div>
372
373	<button id="RadioButtonDlgBtn" data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ dijit.byId("RadioButtonDlg").show() }'>Show Dialog With Radio Button at End</button>
374	<div id="RadioButtonDlg" data-dojo-type="dijit.Dialog" data-dojo-props='title:"Radio Button Dialog"'>
375	<div class="dijitDialogPaneContentArea">
376	<textarea id="textarea-radio-test" width="400" height="200"></textarea>
377	<fieldset>
378	<legend>Best Pet</legend>
379	<input id="dograd" type="radio" name="pet" checked="checked"/>
380	<label for="dograd">Dog</label> -
381	<input id="catrad" type="radio" name="pet"/>
382	<label for="catrad">Cat</label>
383	</fieldset>
384	</div>
385	</div>
386
387	<button id="SelfDestructDlgBtn" data-dojo-type="dijit.form.Button" data-dojo-props='onClick:showSelfDestructDlg'>Show Self-Destruct Dialog</button>
388	<div id="SelfDestructDlgBtn2" style="border: 1px solid black;" class="dijitInline" onclick="showSelfDestructDlg();">Show Self-Destruct Dialog (unfocusable div)</div>
389
390	<button data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ createDialog() }, title:"shows after 3 second delay, with blue background"'>Programatic Dialog (3 second delay)</button> \|
391
392	<p><b><i>(scroll down to see more links to click, for testing positioning / scroll handling)</i></b></p>
393
394	<p>
395	Here's a form. Try clicking the programatic dialog link, then focusing on the form.
396	After the dialog closes focus should be returned to the form
397	</p>
398
399	<form>
400	<input id="plainInput"/>
401	<br>
402	<button id="plainButton">hello</button>
403	<br>
404	<select>
405	<option>Lorem</option>
406	<option>ipsum</option>
407	<option>dolor</option>
408	<option>sit</option>
409	<option>amet</option>
410	</select>
411	</form>
412
413
414	<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
415	imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
416	nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
417	massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
418	pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
419	quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
420	felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
421	quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
422	rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
423	semper velit ante id metus. Praesent massa dolor, porttitor sed,
424	pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
425	tortor pharetra congue. Suspendisse pulvinar.
426	</p>
427	<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
428	ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
429	nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
430	lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
431	est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
432	dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
433	nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
434	pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
435	sociosqu ad litora torquent per conubia nostra, per inceptos
436	hymenaeos.
437	</p>
438	<form>
439	<div style="text-align:center;">
440	<select>
441	<option>1</option>
442	<option>2</option>
443	</select>
444	</div>
445	</form>
446	<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
447	et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
448	ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
449	vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
450	conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
451	luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
452	vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
453	egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
454	felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
455	risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
456	tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
457	turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
458	consectetuer dapibus eros. Aliquam nisl.
459	</p>
460	<div id="reallyWide">[spacer]</div>
461	<p>
462	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
463	semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
464	porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
465	Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
466	Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
467	risus.
468	</p>
469	<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
470	imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
471	nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
472	massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
473	pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
474	quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
475	felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
476	quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
477	rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
478	semper velit ante id metus. Praesent massa dolor, porttitor sed,
479	pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
480	tortor pharetra congue. Suspendisse pulvinar.
481	</p>
482	<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
483	ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
484	nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
485	lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
486	est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
487	dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
488	nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
489	pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
490	sociosqu ad litora torquent per conubia nostra, per inceptos
491	hymenaeos.
492	</p>
493	<form>
494	<div style="text-align:center;">
495	<select>
496	<option>1</option>
497	<option>2</option>
498	</select>
499	</div>
500	</form>
501	<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
502	et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
503	ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
504	vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
505	conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
506	luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
507	vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
508	egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
509	felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
510	risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
511	tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
512	turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
513	consectetuer dapibus eros. Aliquam nisl.
514	</p>
515
516	<p>
517	<button data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ dijit.byId("dialog1").show() }'>Show Dialog</button> \|
518	<!-- showing a dialog from an anchor with inline onclick="" is a solution to page onUnLoad firing
519	but you must return false; alternatively, you can dojo.connect() to the anchor links, and
520	e.preventDefault() on the event object passed. using href="javascript:" inline causes onUnLoad
521	to destroy all widgets in IE6
522	-->
523	<a href="http://dojotoolkit.org" onclick="dijit.byId('dialog1').show(); return false; ">Show Dialog</a>
524	</p>
525
526	<p>
527	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
528	semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
529	porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
530	Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
531	Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
532	risus.
533	</p>
534	<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
535	imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
536	nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
537	massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
538	pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
539	quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
540	felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
541	quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
542	rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
543	semper velit ante id metus. Praesent massa dolor, porttitor sed,
544	pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
545	tortor pharetra congue. Suspendisse pulvinar.
546	</p>
547	<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
548	ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
549	nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
550	lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
551	est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
552	dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
553	nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
554	pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
555	sociosqu ad litora torquent per conubia nostra, per inceptos
556	hymenaeos.
557	</p>
558	<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
559	et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
560	ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
561	vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
562	conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
563	luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
564	vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
565	egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
566	felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
567	risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
568	tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
569	turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
570	consectetuer dapibus eros. Aliquam nisl.
571	</p>
572
573	<p>
574	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
575	semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
576	porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
577	Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
578	Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
579	risus.
580	</p>
581	<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
582	imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
583	nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
584	massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
585	pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
586	quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
587	felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
588	quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
589	rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
590	semper velit ante id metus. Praesent massa dolor, porttitor sed,
591	pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
592	tortor pharetra congue. Suspendisse pulvinar.
593	</p>
594	<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
595	ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
596	nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
597	lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
598	est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
599	dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
600	nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
601	pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
602	sociosqu ad litora torquent per conubia nostra, per inceptos
603	hymenaeos.
604	</p>
605	<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
606	et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
607	ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
608	vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
609	conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
610	luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
611	vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
612	egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
613	felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
614	risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
615	tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
616	turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
617	consectetuer dapibus eros. Aliquam nisl.
618	</p>
619
620	</body>
621	</html>

Note: See TracBrowser for help on using the repository browser.

Download in other formats: