git.roojs.org Git - roojs1/blob - examples/dialog/hello.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\r
   2 <html>\r
   3 <head>\r
   4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\r
   5 <title>Hello World Dialog Example</title>\r
   6  <link rel="stylesheet" type="text/css" href="../../cssX/roojs-all.css"/>
   7     <link rel="stylesheet" type="text/css" href="../../cssX/xtheme-slate.css"/>
   8
   9      <script type="text/javascript" src="../../roojs-all.js"></script>
  10   \r
  11     <script language="javascript" src="hello.js"></script>\r
  12 \r
  13 <!-- Common Styles for the examples -->\r
  14 <link rel="stylesheet" type="text/css" href="../examples.css" />\r
  15 </head>\r
  16 <body>\r
  17 <script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->\r
  18 \r
  19 <h1>Hello World Dialog</h1>\r
  20 <p>This example shows how to create a very simple modal BasicDialog with "autoTabs".</p>\r
  21 <input type="button" id="show-dialog-btn" value="Hello World" /><br /><br />\r
  22 <p>Note that the js is not minified so it is readable. See
  23 <button type="button" onclick="RooDocs.viewSource.show('/hello.js')">hello.js</button>for the full source code.</p>\r
  24 Here's snapshot of the code that creates the dialog:\r
  25 <pre class="code"><code>dialog = new Roo.BasicDialog("hello-dlg", {\r
  26         modal:true,\r
  27         autoTabs:true,\r
  28         width:500,\r
  29         height:300,\r
  30         shadow:true,\r
  31         minWidth:300,\r
  32         minHeight:300\r
  33 });\r
  34 dialog.addKeyListener(27, dialog.hide, dialog);\r
  35 dialog.addButton('Close', dialog.hide, dialog);\r
  36 dialog.addButton('Submit', dialog.hide, dialog).disable();\r
  37 </code></pre>\r
  38 \r
  39     <!-- The dialog is created from existing markup.\r
  40          The inline styles just hide it until it created and should be in a stylesheet -->\r
  41     <div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">\r
  42     <div class="x-dlg-hd">Hello Dialog</div>\r
  43     <div class="x-dlg-bd">\r
  44         <!-- Auto create tab 1 -->\r
  45         <div class="x-dlg-tab" title="Hello World 1">\r
  46             <!-- Nested "inner-tab" to safely add padding -->\r
  47             <div class="inner-tab">\r
  48                  Hello...<br><br><br>\r
  49             </div>\r
  50         </div>\r
  51         <!-- Auto create tab 2 -->\r
  52         <div class="x-dlg-tab" title="Hello World 2">\r
  53             <div class="inner-tab">\r
  54             ... World!\r
  55             </div>\r
  56         </div>\r
  57         </div>\r
  58     </div>\r
  59 </div>\r
  60 </body>\r
  61 </html>\r