msg-box.html 2.2 KB

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