msg-box.html 2.2 KB

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