git.infodrom.org Git - infodrom/rico3/blob - examples/html/panel1.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\r
   2 \r
   3 <html>
   4 <head>
   5 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
   6 <title>Rico Tabbed Panel Example</title>
   7
   8 <script src="LoadRicoClient.js" type="text/javascript"></script>\r
   9 \r
  10 <script type='text/javascript'>\r
  11 Rico.onLoad( function() {\r
  12   var label=Rico.$('BaseLib');\r
  13   if (label) label.innerHTML=Rico.Lib+' '+Rico.LibVersion;\r
  14   new Rico.TabbedPanel( 'tab1', {panelHeight  : 200});
  15 });
  16 </script>\r
  17
  18 <link href="../demo.css" type="text/css" rel="stylesheet" />\r
  19 <style type="text/css">\r
  20 #tab1 {
  21   width: 650px;\r
  22   font-size:small;\r
  23 }\r
  24 .Rico_tabContentContainer {\r
  25   font-size:small;\r
  26 }
  27 </style>
  28 </head>
  29
  30 <body>
  31
  32 <h1>Rico Tabbed Panel - Fixed Height</h1>
  33 \r
  34 <p id='libname'>Base Library: <span id='BaseLib'></span></p>\r
  35 \r
  36 <div id='tab1'>
  37    <ul>
  38      <li>Overview</li>
  39      <li>HTML Code</li>
  40      <li>Rico Code</li>
  41    </ul>
  42
  43    <div>
  44      <div>
  45       <br>This example illustrates how to use Rico.TabbedPanel to transform a set of
  46       divs into a first class tabbed panel component.<br><br>
  47      The Rico.TabbedPanel is actually a very simple component built off of Rico behaviors and effects.
  48      It adds the necessary event handlers on the respective divs to handle the visual aspects of switching tabs.
  49      </div>
  50      <div>
  51      <br>The HTML structure for tabbed panels is an outer div that contains an unordered list (ul)\r
  52      to contain the titles and a div to contain the contents.  Inside the unordered list is a LI element for each title.\r
  53      Inside the content container is a DIV element for each panel. Make sure the number of LI title elements\r
  54      matches the number of panel content DIV elements!\r
  55      <br><br>If you are only using Rico themes, then alternatively, you can use DIV elements instead of UL/LI\r
  56      elements to specify the titles. This method is compatible with older versions of Rico.
  57   <pre>\r
  58   &lt;div id="tabContainer"&gt;
  59     &lt;ul&gt;
  60       &lt;li&gt;Title 1\r
  61       &lt;li&gt;Title 2\r
  62       &lt;li&gt;Title 3\r
  63     &lt;/ul&gt;
  64     &lt;div&gt;
  65       &lt;div&gt;\r
  66         Content 1 ...\r
  67       &lt;/div&gt;\r
  68       &lt;div&gt;\r
  69         Content 2 ...\r
  70       &lt;/div&gt;\r
  71       &lt;div&gt;\r
  72         Content 3 ...\r
  73       &lt;/div&gt;\r
  74     &lt;/div&gt;
  75   &lt;/div&gt;
  76   </pre>
  77           </div>
  78           <div>
  79           <br>To attach the tabbed panel behavior to the tabbed panel container div, construct a Rico.TabbedPanel
  80       object and pass the id of the outer div to it.  This is a bit different than the previous versions.  \r
  81 <pre>
  82   new Rico.TabbedPanel( 'tabContainer', {panelHeight  : 200});
  83 </pre>
  84     There are many other configuration parameters that can be specified to modify various visual aspects of the
  85     tabbed panel. The panelHeight is the attribute that is most commonly overridden.
  86     </div>
  87   </div>
  88
  89 </div>
  90
  91 </body>
  92 </html>