git.roojs.org Git - roojs1/blob - examples/dialog/layout.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>Layout 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="layout.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 <h1>Layout Dialog Example</h1>\r
  19 <p>This example shows how to create a modal dialog with an embedded BorderLayout using LayoutDialog.</p>\r
  20 <input type="button" id="show-dialog-btn" value="Show Dialog" /><br /><br />\r
  21 <p>Note that the js is not minified so it is readable. See
  22 <button type="button" onclick="RooDocs.viewSource.show('/layout.js')">layout.js</button>
  23  for the full source code.</p>\r
  24 \r
  25     <!-- dialog is created from existing markup -->\r
  26     <div id="hello-dlg" style="visibility:hidden;">\r
  27             <div class="x-dlg-hd">Layout Dialog</div>\r
  28             <div class="x-dlg-bd">\r
  29                 <div id="west" class="x-layout-inactive-content">\r
  30                         West\r
  31                     </div>\r
  32                     <div id="center" class="x-layout-inactive-content" style="padding:10px;">\r
  33                 <p>This dialog has the Vista theme applied.</p>\r
  34                 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>\r
  35                 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>\r
  36 \r
  37                     </div>\r
  38             </div>\r
  39         </div>\r
  40 </body>\r
  41 </html>\r