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"
2
		"http://www.w3.org/TR/html4/strict.dtd">
3
<html>
4
<head>
5
	<title>Dialog Widget Dojo Tests</title>
6
	<style type="text/css">
7
		@import "../../dojo/resources/dojo.css";
8
		@import "css/dijitTests.css";
9
		table { border: none; }
10
	</style>
11
	<script type="text/javascript"
12
		djConfig="parseOnLoad: true, isDebug: true"
13
		src="../../dojo/dojo.js"></script>
14
	<script type="text/javascript" src="_testCommon.js"></script>
15
 
16
	<script type="text/javascript">
17
		dojo.require("dijit.Dialog");
18
		dojo.require("dijit.form.Button");
19
		dojo.require("dijit.form.TextBox");
20
		dojo.require("dijit.form.DateTextBox");
21
		dojo.require("dijit.form.TimeTextBox");
22
		dojo.require("dijit.form.FilteringSelect");
23
		dojo.require("dijit.Menu");
24
		dojo.require("dojo.parser");	// scan page for widgets and instantiate them
25
 
26
		// create a do nothing, only for test widget
27
		dojo.declare("dijit.TestWidget",
28
			[dijit._Widget, dijit._Templated], {
29
			templateString: "<div style='margin: 10px; border: inset #700 4px; padding: 5px;' dojoAttachPoint='containerNode'></div>"
30
		});
31
	</script>
32
	<script type="text/javascript">
33
		// make dojo.toJson() print dates correctly (this feels a bit dirty)
34
		Date.prototype.json = function(){ return dojo.date.stamp.toISOString(this, {selector: 'date'});};
35
 
36
		var thirdDlg;
37
		function createDialog() {
38
			if(!thirdDlg){
39
				var pane = dojo.byId('thirdDialog');
40
				pane.style.width = "300px";
41
				thirdDlg = new dijit.Dialog({
42
					title: "Programatic Dialog Creation"
43
				},pane);
44
			}
45
			setTimeout("thirdDlg.show()","3000");
46
		}
47
	</script>
48
	<style type="text/css">
49
		body { font-family : sans-serif; }
50
		form { margin-bottom : 0; }
51
	</style>
52
</head>
53
<body>
54
<h1 class="testTitle">Dijit layout.Dialog tests</h1>
55
<button dojoType="dijit.form.Button" onclick="dijit.byId('dialog1').show()">Show Dialog</button> |
56
 
57
<div dojoType="dijit.Dialog" id="dialog1" title="First Dialog"
58
		execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
59
	<table>
60
		<tr>
61
			<td><label for="name">Name: </label></td>
62
			<td><input dojoType=dijit.form.TextBox type="text" name="name" id="name"></td>
63
		</tr>
64
		<tr>
65
			<td><label for="loc">Location: </label></td>
66
			<td><input dojoType=dijit.form.TextBox type="text" name="loc" id="loc"></td>
67
		</tr>
68
		<tr>
69
			<td><label for="date">Date: </label></td>
70
			<td><input dojoType=dijit.form.DateTextBox type="text" name="date" id="date"></td>
71
		</tr>
72
		<tr>
73
			<td><label for="date">Time: </label></td>
74
			<td><input dojoType=dijit.form.TimeTextBox type="text" name="time" id="time"></td>
75
		</tr>
76
		<tr>
77
			<td><label for="desc">Description: </label></td>
78
			<td><input dojoType=dijit.form.TextBox type="text" name="desc" id="desc"></td>
79
		</tr>
80
		<tr>
81
			<td colspan="2" align="center">
82
				<button dojoType=dijit.form.Button type="submit">OK</button></td>
83
		</tr>
84
	</table>
85
</div>
86
 
87
<div dojoType="dijit.form.DropDownButton">
88
	<span>Show Tooltip Dialog</span>
89
	<div dojoType="dijit.TooltipDialog" id="tooltipDlg" title="Enter Login information"
90
		execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
91
		<table>
92
			<tr>
93
				<td><label for="user">User:</label></td>
94
				<td><input dojoType=dijit.form.TextBox type="text" name="user" id="user"></td>
95
			</tr>
96
			<tr>
97
				<td><label for="pwd">Password:</label></td>
98
				<td><input dojoType=dijit.form.TextBox type="password" name="pwd" id="pwd"></td>
99
			</tr>
100
			<tr>
101
				<td><label for="date2">Date:</label></td>
102
				<td><input dojoType=dijit.form.DateTextBox name="date" id="date2"></td>
103
			</tr>
104
			<tr>
105
				<td><label for="time2">Time:</label></td>
106
				<td><input dojoType=dijit.form.TimeTextBox name="time" id="time2"></td>
107
			</tr>
108
			<tr>
109
				<td><label for="combo">Pizza:</label></td>
110
				<td>
111
					<select dojoType=dijit.form.FilteringSelect name="combo" id="combo" hasDownArrow="true">
112
						<option value="cheese">cheese</option>
113
						<option value="pepperoni">pepperoni</option>
114
						<option value="sausage">sausage</option>
115
					</select>
116
				</td>
117
			</tr>
118
			<tr>
119
				<td colspan="2" align="center">
120
					<button dojoType=dijit.form.Button type="submit" name="submit">Order</button>
121
				</td>
122
			</tr>
123
		</table>
124
		<div style="width: 300px;">Note: This tooltip dialog has a bunch of nested drop downs for testing keyboard and click handling</div>
125
	</div>
126
</div> |
127
 
128
<button dojoType="dijit.form.Button" onclick="createDialog()" title="shows after 3 second delay">Programatic Dialog (3 second delay)</button> |
129
 
130
 
131
<div id="thirdDialog" style="display: none;">
132
	<form>
133
	<input>
134
	<br>
135
	<button>hello</button>
136
	<br>
137
	<select>
138
		<option>Lorem</option>
139
		<option>ipsum</option>
140
		<option>dolor</option>
141
		<option>sit</option>
142
		<option>amet</option>
143
	</select>
144
	</form>
145
	<p>
146
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
147
	semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
148
	porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
149
	Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
150
	Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
151
	risus.
152
	</p>
153
</div>
154
 
155
 
156
<button dojoType="dijit.form.Button" onclick="dijit.byId('fifthDlg').show();">Test slow loading HREF Dialog</button>
157
 
158
<div dojoType="dijit.Dialog" id="fifthDlg" href="layout/getResponse.php?delay=3000&messId=3" title="From HREF (slow network emulated)"></div>
159
 
160
<div dojoType="dijit.form.DropDownButton">
161
	<span>Test slowloading HREF Tooltip Dialog</span>
162
	<div dojoType="dijit.TooltipDialog" href="layout/getResponse.php?delay=500&messId=2">
163
	</div>
164
</div> |
165
 
166
<p><b><i>(scroll down to see more links to click, for testing positioning / scroll handling)</i></b></p>
167
 
168
<p>
169
Here's a form.  Try clicking the programatic dialog link, then focusing on the form.
170
After the dialog closes focus should be returned to the form
171
</p>
172
 
173
<form>
174
<input>
175
<br>
176
<button>hello</button>
177
<br>
178
<select>
179
	<option>Lorem</option>
180
	<option>ipsum</option>
181
	<option>dolor</option>
182
	<option>sit</option>
183
	<option>amet</option>
184
</select>
185
</form>
186
 
187
<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
188
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
189
nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
190
massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
191
pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
192
quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
193
felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
194
quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
195
rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
196
semper velit ante id metus. Praesent massa dolor, porttitor sed,
197
pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
198
tortor pharetra congue. Suspendisse pulvinar.
199
</p>
200
<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
201
ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
202
nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
203
lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
204
est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
205
dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
206
nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
207
pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
208
sociosqu ad litora torquent per conubia nostra, per inceptos
209
hymenaeos.
210
</p>
211
<form>
212
	<center>
213
		<select>
214
			<option>1</option>
215
			<option>2</option>
216
		</select>
217
	</center>
218
</form>
219
<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
220
et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
221
ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
222
vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
223
conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
224
luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
225
vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
226
egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
227
felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
228
risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
229
tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
230
turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
231
consectetuer dapibus eros. Aliquam nisl.
232
</p>
233
<div style="float:right;clear:right;" dojoType="dijit.form.DropDownButton">
234
	<span>dropdown at right</span>
235
<div dojoType="dijit.TooltipDialog" id="dialogright">
236
		<div style="white-space:nowrap;">Aliquam vitae enim. Duis scelerisque metus auctor est venenatis</div>
237
</div>
238
</div>
239
<p>
240
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
241
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
242
porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
243
Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
244
Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
245
risus.
246
</p>
247
<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
248
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
249
nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
250
massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
251
pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
252
quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
253
felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
254
quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
255
rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
256
semper velit ante id metus. Praesent massa dolor, porttitor sed,
257
pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
258
tortor pharetra congue. Suspendisse pulvinar.
259
</p>
260
 
261
<div dojoType="dijit.form.DropDownButton" title="Enter Login information2">
262
	<span>Show Tooltip Dialog pointing upwards, with links</span>
263
	<div dojoType="dijit.TooltipDialog" title="General Information Dialog">
264
		<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
265
		ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
266
		nonummy mollis. <a href="http://www.lipsum.com/">Vestibulum</a> vel purus ac pede semper accumsan. Vivamus
267
		lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
268
		est quam sed urna. Phasellus adipiscing justo in <a href="http://www.lipsum.com/">ipsum</a>. Duis sagittis
269
		dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
270
		nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
271
		pretium sollicitudin sapien. <a href="http://www.lipsum.com/">Suspendisse imperdiet</a>. Class aptent taciti
272
		sociosqu ad litora torquent per conubia nostra, per inceptos
273
		hymenaeos.
274
		</p>
275
	</div>
276
</div>
277
(will go up if there isn't enough space on the bottom of the screen)
278
 
279
<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
280
ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
281
nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
282
lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
283
est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
284
dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
285
nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
286
pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
287
sociosqu ad litora torquent per conubia nostra, per inceptos
288
hymenaeos.
289
</p>
290
<form>
291
	<center>
292
		<select>
293
			<option>1</option>
294
			<option>2</option>
295
		</select>
296
	</center>
297
</form>
298
<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
299
et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
300
ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
301
vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
302
conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
303
luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
304
vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
305
egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
306
felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
307
risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
308
tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
309
turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
310
consectetuer dapibus eros. Aliquam nisl.
311
</p>
312
 
313
<a href="javascript:dijit.byId('dialog1').show()">Show Dialog</a>
314
<p>
315
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
316
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
317
porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
318
Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
319
Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
320
risus.
321
</p>
322
<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
323
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
324
nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
325
massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
326
pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
327
quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
328
felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
329
quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
330
rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
331
semper velit ante id metus. Praesent massa dolor, porttitor sed,
332
pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
333
tortor pharetra congue. Suspendisse pulvinar.
334
</p>
335
<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
336
ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
337
nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
338
lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
339
est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
340
dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
341
nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
342
pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
343
sociosqu ad litora torquent per conubia nostra, per inceptos
344
hymenaeos.
345
</p>
346
<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
347
et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
348
ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
349
vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
350
conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
351
luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
352
vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
353
egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
354
felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
355
risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
356
tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
357
turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
358
consectetuer dapibus eros. Aliquam nisl.
359
</p>
360
 
361
<p>
362
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
363
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
364
porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
365
Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
366
Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
367
risus.
368
</p>
369
<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
370
imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
371
nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
372
massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
373
pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
374
quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
375
felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
376
quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
377
rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
378
semper velit ante id metus. Praesent massa dolor, porttitor sed,
379
pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
380
tortor pharetra congue. Suspendisse pulvinar.
381
</p>
382
<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
383
ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
384
nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
385
lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
386
est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
387
dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
388
nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
389
pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
390
sociosqu ad litora torquent per conubia nostra, per inceptos
391
hymenaeos.
392
</p>
393
<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
394
et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
395
ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
396
vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
397
conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
398
luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
399
vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
400
egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
401
felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
402
risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
403
tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
404
turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
405
consectetuer dapibus eros. Aliquam nisl.
406
</p>
407
 
408
</body>
409
</html>
410