source: Dev/trunk/src/client/dijit/tests/test_Dialog.html @ 483

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

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