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

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\r
   2 <html>
   3 <head>
   4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
   5 <title>Rico</title>
   6 \r
   7 <script src="LoadRicoClient.js" type="text/javascript"></script>\r
   8 <script type='text/javascript'>\r
   9 Rico.onLoad( function() {\r
  10   var label=Rico.$('BaseLib');\r
  11   if (label) label.innerHTML=Rico.Lib+' '+Rico.LibVersion;\r
  12   new Rico.Accordion( 'accordionExample', {panelHeight:200});
  13 });\r
  14 </script>\r
  15 \r
  16 <link href="../demo.css" type="text/css" rel="stylesheet">\r
  17 <style type="text/css">\r
  18 #accordionExample {
  19   margin-top : 6px;
  20   width: 500px;\r
  21   font-size:small;\r
  22 }\r
  23 </style>
  24 </head>
  25
  26
  27 <body>
  28 <h1>Rico Basic Accordion</h1>
  29 \r
  30 <p id='libname'>Base Library: <span id='BaseLib'></span></p>\r
  31 \r
  32 <div id="accordionExample">
  33
  34     <div>
  35       <div>
  36         Overview
  37       </div>
  38       <div>
  39        <br>This example illustrates how to use the Rico.Accordion behavior to transform a set of
  40        divs into a first class accordion component.<br><br>
  41       Rico.Accordion is actually a very simple component built off of Rico behaviors and effects.
  42       It adds the necessary event handlers on the respective divs to handle the visual aspects of expanding, collapsing
  43       and hovering.
  44       </div>
  45     </div>
  46
  47     <div>
  48       <div>
  49         HTML Code
  50       </div>
  51       <div>
  52       <br>The example HTML structure is an outer div that holds all of the panels.  Then, each panel is just a
  53       couple of DIVs (one for the header and one for the content) wrapped in an outer DIV. The id attribute is\r
  54       only required on the outer div.
  55   <pre> &lt;div id="accordionID"&gt;
  56      &lt;div id="Panel1"&gt;
  57        &lt;div id="Header1"&gt;
  58          Overview
  59         &lt;/div&gt;
  60         &lt;div id="Content1"&gt;
  61          ... content text ...
  62         &lt;/div&gt;
  63      &lt;/div&gt;
  64   &lt;/div&gt;
  65   </pre>
  66       </div>
  67       </div>
  68
  69     <div>
  70       <div>
  71         Rico Code
  72       </div>
  73       <div>
  74       <br>To attach the accordion behavior to the accordion container div, construct a Rico.Accordion
  75       object and pass the id of the outer accordion div to it.  This is a bit different than the previous versions.  \r
  76     <pre>
  77     new Rico.Accordion( 'accordionID', {panelHeight:200} );
  78     </pre>
  79       There are many other configuration parameters that can be specified to modify various visual aspects of the
  80       accordion. The panelHeight is the attribute that is most commonly overridden.
  81       </div>
  82     </div>
  83
  84
  85     <div>
  86       <div>
  87         Important Note
  88       </div>
  89       <div>
  90       <br>The accordion is very flexible.
  91       However, you do have to make sure the header and content elements are structured properly.
  92       <br>
  93       </div>
  94     </div>
  95
  96 </div>
  97
  98 </body>\r
  99 </html>\r