root / trunk / demos / widget / dialog.html

Revision 4161, 14.1 kB (checked in by bill, 3 years ago)

better dialog demo

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