root / trunk / tests / widget / test_Dialog.html

Revision 6660, 12.8 kB (checked in by bill, 2 years ago)

1. don't share background (it prevents setting different background colors/opacities for different dialogs)
2. make closeOnBackgroundClick false by default

  • Property svn:eol-style set to native
Line 
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<script type="text/javascript"> djConfig = { isDebug: true }; </script>
7<script type="text/javascript" src="../../dojo.js"></script>
8<script type="text/javascript">
9        dojo.require("dojo.widget.Dialog");
10</script>
11
12<script type="text/javascript">
13var dlg;
14var secDlg;
15function init(e) {
16        dlg = dojo.widget.byId("DialogContent");
17        secDlg = dojo.widget.byId("SecondDialog");
18}
19dojo.addOnLoad(init);
20
21</script>
22<style type="text/css">
23body { font-family : sans-serif; }
24.dojoDialog {
25        background : #eee;
26        border : 1px solid #999;
27        -moz-border-radius : 5px;
28        padding : 4px;
29}
30
31form {
32        margin-bottom : 0;
33}
34</style>
35</head>
36<body>
37<a href="javascript:dlg.show()">Show First Dialog</a>
38
39<div dojoType="dialog" id="DialogContent" bgColor="white" bgOpacity="0.5" toggle="fade" toggleDuration="250" closeNode="hider">
40        <h3>First Dialog</h3>
41        <form onsubmit="return false;">
42                <table>
43                        <tr>
44                                <td>Name:</td>
45                                <td><input type="text"></td>
46                        </tr>
47                        <tr>
48                                <td>Location:</td>
49                                <td><input type="text"></td>
50                        </tr>
51                        <tr>
52                                <td>Description:</td>
53                                <td><input type="text"></td>
54                        </tr>
55                        <tr>
56                                <td>Location:</td>
57                                <td><input type="file"></td>
58                        </tr>
59                        <tr>
60                                <td colspan="2" align="center">
61                                        <input type="button" id="hider" value="OK"></td>
62                        </tr>
63                </table>
64        </form>
65</div>
66
67<select>
68        <option>Lorem</option>
69        <option>ipsum</option>
70        <option>dolor</option>
71        <option>sit</option>
72        <option>amet</option>
73</select>
74
75<p>
76Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
77semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
78porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
79Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
80Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
81risus.
82</p>
83<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
84imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
85nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
86massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
87pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
88quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
89felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
90quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
91rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
92semper velit ante id metus. Praesent massa dolor, porttitor sed,
93pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
94tortor pharetra congue. Suspendisse pulvinar.
95</p>
96<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
97ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
98nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
99lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
100est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
101dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
102nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
103pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
104sociosqu ad litora torquent per conubia nostra, per inceptos
105hymenaeos.
106</p>
107<form>
108        <center>
109                <select>
110                        <option>1</option>
111                        <option>2</option>
112                </select>
113        </center>
114</form>
115<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
116et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
117ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
118vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
119conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
120luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
121vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
122egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
123felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
124risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
125tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
126turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
127consectetuer dapibus eros. Aliquam nisl.
128</p>
129
130<p>
131Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
132semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
133porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
134Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
135Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
136risus.
137</p>
138<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
139imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
140nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
141massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
142pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
143quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
144felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
145quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
146rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
147semper velit ante id metus. Praesent massa dolor, porttitor sed,
148pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
149tortor pharetra congue. Suspendisse pulvinar.
150</p>
151<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
152ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
153nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
154lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
155est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
156dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
157nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
158pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
159sociosqu ad litora torquent per conubia nostra, per inceptos
160hymenaeos.
161</p>
162<form>
163        <center>
164                <select>
165                        <option>1</option>
166                        <option>2</option>
167                </select>
168        </center>
169</form>
170<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
171et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
172ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
173vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
174conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
175luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
176vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
177egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
178felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
179risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
180tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
181turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
182consectetuer dapibus eros. Aliquam nisl.
183</p>
184
185<a href="javascript:secDlg.show()">Show Second Dialog</a>
186<p>
187Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
188semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
189porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
190Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
191Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
192risus.
193</p>
194<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
195imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
196nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
197massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
198pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
199quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
200felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
201quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
202rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
203semper velit ante id metus. Praesent massa dolor, porttitor sed,
204pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
205tortor pharetra congue. Suspendisse pulvinar.
206</p>
207<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
208ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
209nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
210lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
211est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
212dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
213nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
214pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
215sociosqu ad litora torquent per conubia nostra, per inceptos
216hymenaeos.
217</p>
218<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
219et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
220ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
221vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
222conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
223luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
224vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
225egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
226felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
227risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
228tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
229turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
230consectetuer dapibus eros. Aliquam nisl.
231</p>
232
233<p>
234Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
235semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
236porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
237Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
238Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
239risus.
240</p>
241<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
242imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
243nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
244massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
245pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
246quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
247felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
248quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
249rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
250semper velit ante id metus. Praesent massa dolor, porttitor sed,
251pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
252tortor pharetra congue. Suspendisse pulvinar.
253</p>
254<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
255ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
256nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
257lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
258est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
259dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
260nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
261pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
262sociosqu ad litora torquent per conubia nostra, per inceptos
263hymenaeos.
264</p>
265<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
266et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
267ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
268vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
269conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
270luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
271vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
272egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
273felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
274risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
275tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
276turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
277consectetuer dapibus eros. Aliquam nisl.
278</p>
279
280<div dojoType="dialog" id="SecondDialog" bgColor="black" closeNode="closeButton">
281        <h3>Second Dialog</h3>
282        <form onsubmit="return false;">
283                <table>
284                        <tr>
285                                <td>Name:</td>
286                                <td><input type="text"></td>
287                        </tr>
288                        <tr>
289                                <td>Location:</td>
290                                <td><input type="text"></td>
291                        </tr>
292                        <tr>
293                                <td>Description:</td>
294                                <td><input type="text"></td>
295                        </tr>
296                        <tr>
297                                <td>Location:</td>
298                                <td><input type="file"></td>
299                        </tr>
300                        <tr>
301                                <td colspan="2" align="center">
302                                        <input type="button" id="closeButton" value="OK"></td>
303                        </tr>
304                </table>
305        </form>
306</div>
307
308</body>
309</html>
Note: See TracBrowser for help on using the browser.