source: Dev/trunk/src/client/dojox/widget/tests/test_Dialog.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.

File size: 16.0 KB
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>DojoX Dialog example</title>
6
7        <!-- required: a default theme file -->
8        <link rel="stylesheet" id="themeStyles" href="../../../dijit/themes/claro/claro.css">
9        <link rel="stylesheet" href="../Dialog/Dialog.css">
10
11        <style type="text/css">
12                @import "../../../dojo/resources/dojo.css";
13                @import "../../../dijit/tests/css/dijitTests.css";
14
15                /* this is how you style underlays */   
16                #thirdTest_underlay { background-color: #000 }
17                #fourthTest_underlay,
18                #secondTest_underlay { background-color: #369 }
19        </style>               
20
21        <!-- required: dojo.js -->
22        <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async:true, parseOnLoad: true"></script>
23
24        <!-- do not use! only for testing dynamic themes -->
25        <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
26       
27        <script type="text/javascript">
28            require(["dojo/parser","dojox/widget/DialogSimple", "dojox/widget/Dialog", "dojo/fx/easing", "dijit/form/Button", "dojo/domReady!"], function(){
29                           
30                        // a programatic test:
31                        var thinger = new dojox.widget.Dialog({
32                                title:"foobar",
33                                dimensions: [200,200],
34                                draggable:false,
35                                easing: dojo.fx.easing.elasticOut,
36                                sizeDuration:900,
37                                sizeMethod:"combine"
38                        },"codeMade");
39                        thinger.startup();
40                       
41
42                        // make the "stock" buttons dijit Buttons, but skip the
43                        // dojoType="" for the purists.
44                        dojo.query("button")
45                                .forEach(function(n){
46                                        var oc = dojo.attr(n, "onclick");
47                                        var button = new dijit.form.Button({
48                                                onClick: oc
49                                        }, n)
50                                });
51
52                        // programatic with content:
53                        var thing2 = new dojox.widget.Dialog({
54                                content:"<p>I am teh inner content</p>"
55                        });
56                        thing2.startup();
57                               
58                        new dijit.form.Button({
59                                onClick:function(){
60                                        thing2.show()
61                                },
62                                label:"show prog."
63                        }).placeAt("testholder");
64
65                        // test double show (but #9147)
66                        var dblDialog = new dojox.widget.Dialog({
67                                content:"<p>.show() is called twice on me</p>"
68                        });
69                        dblDialog.startup();
70
71                        new dijit.form.Button({
72                                onClick:function(){
73                                        dblDialog.show();
74                                        dblDialog.show(); // intentially calling show() on an already shown dialog
75                                },
76                                label:"double show."
77                        }).placeAt("testholder");
78               
79                dojo.parser.parse();
80               
81            });
82
83        </script>
84</head>
85<body class="claro">
86
87        <h1 class="testTitle">dojox.widget.Dialog module tests</h1>
88       
89        <p>This is the DojoX version of the dijit.Dialog. It is both very simple, and very different.</p>
90
91        <div id='testholder' class="tests">
92               
93                <h2>dojox.widget.DialogSimple</h2>
94               
95                <p>A Simple subclass mixing the capabilities of dojox.layout.ContentPane with default
96                        dijit.Dialog styles
97                </p>
98               
99                <button onclick="dijit.byId('stest').show()">DialogSimple</button>
100                <div id="stest" dojoType="dojox.widget.DialogSimple" style="width:200px">
101                        <h2 style="margin-top:0">Wow!</h2>
102                        <p style="margin-top:0">Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
103                        ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
104                        nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
105                        lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
106                        est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
107                        dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
108                        nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
109                        pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
110                        sociosqu ad litora torquent per conubia nostra, per inceptos
111                        hymenaeos.
112                        </p>
113                </div>
114
115                <button onclick="dijit.byId('stestjs').show()">DialogSimple:exejs</button>
116                <div id="stestjs" title="Check the Console"
117                        dojoType="dojox.widget.DialogSimple" style="width:200px" executeScripts="true" href="withjs.html"
118                ></div>
119               
120                <h2>dojox.widget.Dialog</h2>
121                <p>Fancy. Has more options. Different styles, too.</p>
122               
123                <button onclick="dijit.byId('firstTest').show()">Defaults only</button>
124               
125                <div id="firstTest" dojoType="dojox.widget.Dialog" title="A Dialog Thinger">
126                        <p style="margin-top:0">Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
127                        ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
128                        nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
129                        lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
130                        est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
131                        dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
132                        nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
133                        pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
134                        sociosqu ad litora torquent per conubia nostra, per inceptos
135                        hymenaeos.
136                        </p>
137                </div>
138       
139                <button onclick="dijit.byId('secondTest').show()">Size to viewport, default padding (35)</button>
140       
141                <div id="secondTest" dojoType="dojox.widget.Dialog" sizeToViewport="true" title="A Dialog Thinger">
142                        <p style="margin-top:0">Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
143                        ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
144                        nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
145                        lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
146                        est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
147                        dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
148                        nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
149                        pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
150                        sociosqu ad litora torquent per conubia nostra, per inceptos
151                        hymenaeos.
152                        </p>
153                </div>
154
155                <button onclick="dijit.byId('thirdTest').show()">Size to viewport + 100 padding</button>
156       
157                <div id="thirdTest" dojoType="dojox.widget.Dialog" sizeToViewport="true" viewportPadding="100" title="A Dialog Thinger">
158                        <p style="margin-top:0">Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
159                        ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
160                        nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
161                        lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
162                        est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
163                        dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
164                        nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
165                        pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
166                        sociosqu ad litora torquent per conubia nostra, per inceptos
167                        hymenaeos.
168                        </p>
169                </div>
170
171                <button onclick="dijit.byId('fourthTest').show()">dimensions 600 x 420</button>
172                <div id="fourthTest" dojoType="dojox.widget.Dialog" dimensions="[600,420]" title="A Dialog Thinger">
173                        <p style="margin-top:0">Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
174                        ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
175                        nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
176                        lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
177                        est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
178                        dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
179                        nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
180                        pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
181                        sociosqu ad litora torquent per conubia nostra, per inceptos
182                        hymenaeos.
183                        </p>
184                </div>
185
186                <button onclick="dijit.byId('anotherTest').show()">sizeDuration and easing</button>     
187                <div id="anotherTest" dojoType="dojox.widget.Dialog" sizeToViewport="true"
188                        viewportPadding="150" easing="dojo.fx.easing.backOut" sizeDuration="1400"
189                        title="A Dialog Thinger"
190                >
191                        <h2 style="margin-top:0">Wow!</h2>
192                        <p style="margin-top:0">Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
193                        ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
194                        nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
195                        lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
196                        est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
197                        dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
198                        nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
199                        pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
200                        sociosqu ad litora torquent per conubia nostra, per inceptos
201                        hymenaeos.
202                        </p>
203                </div>
204
205                <button onclick="dijit.byId('hrefText').show()">href + defaults</button>
206                <div id="hrefText" dojoType="dojox.widget.Dialog" href="../../../dijit/tests/layout/getResponse.php?delay=3000&messId=3"></div>
207               
208                <button onclick="dijit.byId('yetanotherTest').show()">showTitle</button>       
209                <div id="yetanotherTest" dojoType="dojox.widget.Dialog" showTitle="true" title="I am A title!!!">
210                        <h2 style="margin-top:0">Wow!</h2>
211                        <p style="margin-top:0">
212                                Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
213                        ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
214                        nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
215                        lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
216                        est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
217                        dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
218                        nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
219                        pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
220                        sociosqu ad litora torquent per conubia nostra, per inceptos
221                        hymenaeos.
222                                Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
223                        ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
224                        nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
225                        lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
226                        est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
227                        dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
228                        nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
229                        pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
230                        sociosqu ad litora torquent per conubia nostra, per inceptos
231                        hymenaeos.
232                                Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
233                        ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
234                        nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
235                        lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
236                        est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
237                        dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
238                        nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
239                        pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
240                        sociosqu ad litora torquent per conubia nostra, per inceptos
241                        hymenaeos.
242                                Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
243                        ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
244                        nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
245                        lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
246                        est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
247                        dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
248                        nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
249                        pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
250                        sociosqu ad litora torquent per conubia nostra, per inceptos
251                        hymenaeos.
252                                Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
253                        ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
254                        nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
255                        lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
256                        est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
257                        dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
258                        nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
259                        pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
260                        sociosqu ad litora torquent per conubia nostra, per inceptos
261                        hymenaeos.
262                                Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
263                        ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
264                        nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
265                        lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
266                        est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
267                        dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
268                        nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
269                        pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
270                        sociosqu ad litora torquent per conubia nostra, per inceptos
271                        hymenaeos.
272                        </p>
273                </div>
274       
275                <button onclick="dijit.byId('yetanotherTest2').show()">draggable</button>       
276                <div id="yetanotherTest2" dojoType="dojox.widget.Dialog" draggable="true" showTitle="true" title="I am A title!!!">
277                        <h2 style="margin-top:0">Wow!</h2>
278                        <p style="margin-top:0">Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
279                        ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
280                        nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
281                        lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
282                        est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
283                        dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
284                        nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
285                        pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
286                        sociosqu ad litora torquent per conubia nostra, per inceptos
287                        hymenaeos.
288                        </p>
289                </div>
290       
291                <button onclick="dijit.byId('yetanotherTest3').show()">method = combine, easing</button>       
292                <div id="yetanotherTest3" dojoType="dojox.widget.Dialog" sizeMethod="combine"
293                        easing="dojo.fx.easing.bounceOut" sizeDuration="600">
294                        <h2 style="margin-top:0">Wow!</h2>
295                        <p style="margin-top:0">Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
296                        ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
297                        nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
298                        lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
299                        est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
300                        dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
301                        nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
302                        pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
303                        sociosqu ad litora torquent per conubia nostra, per inceptos
304                        hymenaeos.
305                        </p>
306                </div>
307       
308                <button onclick="dijit.byId('codeMade').show()">programatic</button>
309                <div id="codeMade"><h2 style="margin-top:0">Wow!</h2><p>A small dialog</p></div>
310
311                <button onclick="dijit.byId('modaltest').show()">modal:true</button>
312                <div id="modaltest" dojoType="dojox.widget.Dialog" modal="true"
313                        easing="dojo.fx.easing.bounceOut" sizeDuration="600">
314                        <h2 style="margin-top:0">Wow!</h2>
315                        <p style="margin-top:0">Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
316                        ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
317                        nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
318                        lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
319                        est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
320                        dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
321                        nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
322                        pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
323                        sociosqu ad litora torquent per conubia nostra, per inceptos
324                        hymenaeos.
325                        </p>
326                </div>
327       
328        </div>
329
330        <p>There are several additional parameters to define how you want to display the dialog. It makes
331                <em>some</em> assumption about how you want to size your pane.</p>
332                 
333        <p>That's all folks, all of the supported options have buttons and inline tests.</p>
334        <p>The names of these will be reversed in Dojo 2.0, should they survive the migration</p>
335       
336</body>
337</html>
338
Note: See TracBrowser for help on using the repository browser.