git.infodrom.org Git - infodrom/rico3/blob - examples/html/accordion3.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 \r
  10 Rico.loadModule('Accordion');\r
  11
  12 Rico.onLoad( function() {\r
  13   var label=Rico.$('BaseLib');\r
  14   if (label) label.innerHTML=Rico.Lib+' '+Rico.LibVersion;\r
  15   new Rico.Accordion( 'OuterAccordion', {panelHeight:200, selectedIndex: 1});\r
  16   new Rico.Accordion( 'NestedAccordion', {panelHeight:100});
  17 });\r
  18 </script>\r
  19 \r
  20 <link href="../demo.css" type="text/css" rel="stylesheet" />\r
  21 <style type="text/css">\r
  22 #OuterAccordion {
  23   margin-top : 6px;
  24   width: 500px;\r
  25   font-size:small;\r
  26 }
  27 </style>
  28 </head>
  29
  30
  31 <body>
  32 <h1>Rico Nested Accordions</h1>
  33 \r
  34 <p id='libname'>Base Library: <span id='BaseLib'></span>\r
  35 </p>\r
  36 \r
  37 <div id="OuterAccordion">
  38
  39     <div>
  40       <div>
  41         Overview
  42       </div>
  43       <div>
  44        <br>This example illustrates how to use the Rico.Accordion behavior to transform a set of
  45        divs into a first class accordion component.<br><br>
  46       Rico.Accordion is actually a very simple component built off of Rico behaviors and effects.
  47       It adds the necessary event handlers on the respective divs to handle the visual aspects of expanding, collapsing
  48       and hovering.
  49       </div>
  50     </div>
  51
  52                 <div>\r
  53                   <div>\r
  54                         More Info (nested accordion)\r
  55                   </div>\r
  56                   <div>\r
  57             <div id="NestedAccordion">\r
  58                 <div>\r
  59                   <div>\r
  60                          Overview of ContentTransition base component\r
  61                   </div>\r
  62                   <div>\r
  63                       The Accordion derives from a base component that applies and manages\r
  64                       behaviors and effects.  The effects can be defined at the extended class.\r
  65                       This approach results in a very flexible way of managing\r
  66                   </div>\r
  67                 </div>\r
  68                 <div>\r
  69                   <div>\r
  70                             Alternative HTML\r
  71                   </div>\r
  72                     <div>\r
  73                         Since the accordion does not parse the html, it can be constructed much looser\r
  74                         than in previous versions.  The base ContentTransition can be used to quicly build\r
  75                         components such as tabs, master details, and many application specific behaviors.\r
  76                         We will be providing examples of building your own soon.\r
  77                   </div>\r
  78                 </div>\r
  79                 <div>\r
  80                   <div>\r
  81                             Alternative effects\r
  82                   </div>\r
  83                     <div>\r
  84                     We will be discussing alternative transition effects here.\r
  85                     Should be interesting.\r
  86                   </div>\r
  87                 </div>\r
  88             </div>\r
  89 \r
  90         </div>\r
  91                 </div>\r
  92
  93     <div>
  94       <div>
  95         Rico Code
  96       </div>
  97       <div>
  98       <br>To attach the accordion behavior to the accordion container div, construct a Rico.Accordion
  99       object and pass the id of the outer accordion div to it.  Since there are two accordions in this example, we create two objects:\r
 100     <pre>
 101   new Rico.Accordion( 'OuterAccordion', \r
 102                       { panelHeight : 200, \r
 103                         selectedIndex : 1 });\r
 104   new Rico.Accordion( 'NestedAccordion', \r
 105                       { panelHeight : 100 });\r
 106     </pre>
 107       Panels are numbered starting with 0. The "selectedIndex:1" option\r
 108       ensures that the panel with the nested accordion is open by default.
 109       </div>
 110     </div>
 111
 112
 113     <div>
 114       <div>
 115         Important Note
 116       </div>
 117       <div>
 118       <br>The accordion is very flexible.
 119       However, you do have to make sure the header and content elements are structured properly.
 120       <br>
 121       </div>
 122     </div>
 123
 124 </div>
 125
 126 </body>\r
 127 </html>\r