third-party/jquery-ui-1.10.2/tests/visual/dialog/complex-dialogs.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>Dialog Visual Test</title>
   6         <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
   7         <script src="../../../jquery-1.9.1.js"></script>
   8         <script src="../../../ui/jquery.ui.core.js"></script>
   9         <script src="../../../ui/jquery.ui.widget.js"></script>
  10         <script src="../../../ui/jquery.ui.mouse.js"></script>
  11         <script src="../../../ui/jquery.ui.draggable.js"></script>
  12         <script src="../../../ui/jquery.ui.position.js"></script>
  13         <script src="../../../ui/jquery.ui.resizable.js"></script>
  14         <script src="../../../ui/jquery.ui.button.js"></script>
  15         <script src="../../../ui/jquery.ui.dialog.js"></script>
  16
  17         <!-- stuff needed to make things complex -->
  18         <script src="../../../ui/jquery.ui.datepicker.js"></script>
  19         <script src="../../../ui/jquery.ui.menu.js"></script>
  20         <script src="../../../ui/jquery.ui.autocomplete.js"></script>
  21         <script src="../../../ui/jquery.ui.tooltip.js"></script>
  22
  23         <style>
  24         body {
  25                 font-size: 62.5%;
  26         }
  27         </style>
  28         <script>
  29         $(function() {
  30                 var dialog = $( "#dialog" ).dialog({
  31                                 modal: true,
  32                                 width: 500,
  33                                 buttons: [
  34                                         {
  35                                                 click: $.noop,
  36                                                 icons: {
  37                                                         primary: "ui-icon-check"
  38                                                 },
  39                                                 text: "Ok"
  40                                         },
  41                                         {
  42                                                 click: function() {
  43                                                         $( this ).dialog( "close" );
  44                                                 },
  45                                                 icons: {
  46                                                         primary: "ui-icon-cancel"
  47                                                 },
  48                                                 text: "Cancel",
  49                                                 showText: false
  50                                         }
  51                                 ]
  52                         }).dialog("option", "height", 600),
  53
  54                         datepickerDialog = $( "#dialog-datepicker" ).dialog({
  55                                 autoOpen: false,
  56                                 modal: true
  57                         }),
  58
  59                         autocompleteDialog = $( "#dialog-autocomplete" ).dialog({
  60                                 autoOpen: false,
  61                                 modal: false,
  62                                 width: 600
  63                         });
  64
  65                 $( "#open-dialog" ).click(function() {
  66                         dialog.dialog( "open" );
  67                 });
  68
  69                 $( "#open-datepicker" ).click(function() {
  70                         datepickerDialog.dialog( "open" );
  71                 });
  72
  73                 $( "#open-autocomplete" ).click(function() {
  74                         autocompleteDialog.dialog( "open" );
  75                 });
  76
  77                 $( "#datepicker" ).datepicker();
  78
  79                 $( "#autocomplete" ).autocomplete({
  80                         source: [
  81                                 "ActionScript",
  82                                 "AppleScript",
  83                                 "Asp",
  84                                 "BASIC",
  85                                 "Scheme"
  86                         ]
  87                 });
  88
  89                 $( "#destroy-dialog" ).click(function() {
  90                         dialog.dialog( "destroy" ).show();
  91                         $( this ).remove();
  92                 });
  93
  94                 $( document ).tooltip();
  95         });
  96         </script>
  97 </head>
  98 <body>
  99
 100 <p>WHAT: A modal dialog opening another modal dialog (including a datepicker), opening a non-modal dialog (including an autocomplete with tooltip applied). A regular link on the page, outside of the dialogs.</p>
 101 <p>EXPECTED: As long as a modal dialog is open, focus stays within the dialogs. Both mouse and keyboard interactions are captured and restricted to the dialog. When the nested modal dialog is open, the first modal dialog can't be interacted with, until the nested dialog is closed. When the third dialog is open (not modal), switching between the two dialogs is possible, both can be interacted with.</p>
 102
 103
 104 <button id="open-dialog">Reopen dialog</button>
 105
 106 <div id="dialog" title="Basic dialog, but with a really long title that doesn't quite fit.">
 107         <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
 108         <p><button id="open-datepicker">Open another window with a datepicker.</button></p>
 109         <p><button id="destroy-dialog">Self destruct</button></p>
 110 </div>
 111
 112 <div id="dialog-datepicker" title="A dialog with a datepicker">
 113         <p>Date: <input id="datepicker"></p>
 114         <p><button id="open-autocomplete" autofocus>Open another window with an autocomplete and a tooltip.</button></p>
 115 </div>
 116
 117 <div id="dialog-autocomplete">
 118         <label for="autocomplete">Tags: </label>
 119         <input id="autocomplete" title="Try typing something!">
 120 </div>
 121
 122 <a href="#">Outside link</a>
 123
 124 </body>
 125 </html>