git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/tests/test_Dialog.html

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