examples/message-box/msg-box.html

   1 <html>
   2 <head>
   3 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   4 <title>MessageBox</title>
   5
   6     <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
   7     <!-- GC -->
   8         <!-- LIBS -->
   9         <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
  10         <!-- ENDLIBS -->
  11
  12     <script type="text/javascript" src="../../ext-all.js"></script>
  13     <script type="text/javascript" src="msg-box.js"></script>
  14
  15     <!-- Common Styles for the examples -->
  16     <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
  17
  18     <style type="text/css">
  19         .x-window-dlg .ext-mb-download {
  20             background:transparent url(images/download.gif) no-repeat top left;
  21             height:46px;
  22         }
  23     </style>
  24 </head>
  25 <body>
  26 <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
  27 <h1>MessageBox Dialogs</h1>
  28 <p>The example shows how to use the MessageBox class. Some of the buttons have animations, some are normal.</p>
  29 <p>The js is not minified so it is readable. See <a href="msg-box.js">msg-box.js</a>.</p>
  30
  31 <p>
  32     <b>Confirm</b><br />
  33     Standard Yes/No dialog.
  34     <button id="mb1">Show</button>
  35 </p>
  36
  37 <p>
  38     <b>Prompt</b><br />
  39     Standard prompt dialog.
  40     <button id="mb2">Show</button>
  41 </p>
  42
  43 <p>
  44     <b>Multi-line Prompt</b><br />
  45     A multi-line prompt dialog.
  46     <button id="mb3">Show</button>
  47 </p>
  48
  49 <p>
  50     <b>Yes/No/Cancel</b><br />
  51     Standard Yes/No/Cancel dialog.
  52     <button id="mb4">Show</button>
  53 </p>
  54
  55 <p>
  56     <b>Progress Dialog</b><br />
  57     Dialog with measured progress bar.
  58     <button id="mb6">Show</button>
  59 </p>
  60
  61 <p>
  62     <b>Wait Dialog</b><br />
  63     Dialog with indefinite progress bar and custom icon (will close after 8 sec).
  64     <button id="mb7">Show</button>
  65 </p>
  66
  67 <p>
  68     <b>Alert</b><br />
  69     Standard alert message dialog.
  70     <button id="mb8">Show</button>
  71 </p>
  72
  73 <p>
  74     <b>Icons</b><br />
  75     Standard alert with optional icon.
  76     <select id="icons">
  77         <option id="error" selected="selected">Error</option>
  78         <option id="info">Informational</option>
  79         <option id="question">Question</option>
  80         <option id="warning">Warning</option>
  81     </select>
  82     <button id="mb9">Show</button>
  83 </p>
  84 </body>
  85 </html>