git.roojs.org Git - roojs1/blob - examples/tabs/tabs.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>Tabs 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  \r
  12 \r
  13     <!-- Tabs Example Files -->\r
  14     <link rel="stylesheet" type="text/css" href="tabs-example.css" />\r
  15     <script type="text/javascript" src="tabs-example.js"></script>\r
  16 \r
  17     <!-- Common Styles for the examples -->\r
  18     <link rel="stylesheet" type="text/css" href="../examples.css" />\r
  19 </head>\r
  20 <body>\r
  21 <script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->\r
  22 \r
  23 <h1>Tab Panel Examples</h1>\r
  24 <p>Note that the js and css is not minified so it is readable. See <a href="tabs-example.js">tabs-example.js</a> for the tab creation code\r
  25 and <a href="tabs-example.css">tabs-example.css</a> for the css.</p>\r
  26 \r
  27     <h3>Tabs without fixed height that resize to the content. Built from existing markup.</h3><br>\r
  28     <!-- container for the existing markup tabs -->\r
  29     <div id="tabs1">\r
  30         <div id="script" class="tab-content">\r
  31         <b>Here's my script:</b>\r
  32 \r
  33 <!-- pre sections lookup hideous -->\r
  34 <pre>\r
  35 var tabs = new Roo.TabPanel('tabs1');\r
  36 tabs.addTab('script', "View Script");\r
  37 tabs.addTab('markup', "View Markup");\r
  38 tabs.activate('script');</pre>\r
  39  <!-- end pre -->\r
  40 \r
  41        </div>\r
  42         <div id="markup" class="tab-content">\r
  43 \r
  44 <!-- pre sections lookup hideous -->\r
  45 <pre>\r
  46 &lt;div id="tabs1"&gt;\r
  47     &lt;div id="script" class="tab-content"&gt;\r
  48         (Content goes here)\r
  49     &lt;/div&gt;\r
  50     &lt;div id="markup" class="tab-content"&gt;\r
  51         (Content goes here)\r
  52     &lt;/div&gt;\r
  53 &lt;/div></pre>\r
  54 <!-- end pre -->\r
  55 \r
  56         </div>\r
  57     </div>\r
  58 \r
  59     <br>\r
  60      <h3>Tabs with fixed height that scroll the content. Built entirely with javascript.</h3>\r
  61     <ul class="list">\r
  62     <li>Tab 1 is a normal tab with content passed when adding it.</li>\r
  63     <li>Tab 2 is loaded via Ajax. It was set up using the standard UpdateManager functionality. It reloads it's content every time it's activated.</li>\r
  64     <li>Tab 3 is loaded via Ajax too. It was set up using setUrl() a convenience method that will do everything done on tab 2 and also has the ability to set it to load only once.</li>\r
  65     <li>Tab 4 has an event listener attached.</li>\r
  66     <li>Tab 5 is disabled.</li>\r
  67     </ul><br>\r
  68 \r
  69     <!-- container for the pure JS tabs -->\r
  70     <div id="jtabs" class="xp">\r
  71     </div>\r
  72 \r
  73 </body>\r
  74 </html>