Panel1
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Panel1 as PDF for free.
More details
- Words: 303
- Pages: 1
Overview
HTML Code
Rico Code
Important Note
This example illustrates how to use the Rico.Accordion behavior to transform a set of divs into a first class accordion component. The Rico.Accordion is actually a very simple component built off of Rico behaviors and effects. It adds the necessary event handlers on the respective divs to handle the visual aspects of expanding, collapsing and hovering. The example HTML structure is an outer div that holds all of the panels. Then, each panel is just a couple of DIVs (one for the header and one for the content) wrapped in an outer DIV. You can actually use elements other than divs.
To attach the accordion behavior to the accordion container div, construct a Rico.Accordion object and pass the panel titles and contents to it. This is a bit different than the previous version, but allows a lot more flexibilitiy. With the new Prototype Selector class it is still very easy. new Rico.Accordion( $$('div.panelheader'), $$('div.panelContent') ); -ornew Rico.Accordion( $$('div.panelheader'), $$('div.panelContent'), {panelHeight:200, hoverClass: 'mdHover', selectedClass: 'mdSelected'}} );
The second example specifies the height of the accordion panels and the css classes that can be associated with the accordion behaviors. There are many other configuration parameters that can be specified to modify various visual aspects of the accordion. The panelHeight is the attribute that is most commonly overridden. The accordion is very flexible now and can handle scrollbars on firefox through the use of some new features in Rico. However, you do have to make sure the header and content elements passed in to the Accordion constructor have the same elements and match up in the order they are passed. The new Accordion requires far less html attributes than Rico's previous versions.
HTML Code
Rico Code
Important Note
This example illustrates how to use the Rico.Accordion behavior to transform a set of divs into a first class accordion component. The Rico.Accordion is actually a very simple component built off of Rico behaviors and effects. It adds the necessary event handlers on the respective divs to handle the visual aspects of expanding, collapsing and hovering. The example HTML structure is an outer div that holds all of the panels. Then, each panel is just a couple of DIVs (one for the header and one for the content) wrapped in an outer DIV. You can actually use elements other than divs.
Overview
... content text ...
To attach the accordion behavior to the accordion container div, construct a Rico.Accordion object and pass the panel titles and contents to it. This is a bit different than the previous version, but allows a lot more flexibilitiy. With the new Prototype Selector class it is still very easy. new Rico.Accordion( $$('div.panelheader'), $$('div.panelContent') ); -ornew Rico.Accordion( $$('div.panelheader'), $$('div.panelContent'), {panelHeight:200, hoverClass: 'mdHover', selectedClass: 'mdSelected'}} );
The second example specifies the height of the accordion panels and the css classes that can be associated with the accordion behaviors. There are many other configuration parameters that can be specified to modify various visual aspects of the accordion. The panelHeight is the attribute that is most commonly overridden. The accordion is very flexible now and can handle scrollbars on firefox through the use of some new features in Rico. However, you do have to make sure the header and content elements passed in to the Accordion constructor have the same elements and match up in the order they are passed. The new Accordion requires far less html attributes than Rico's previous versions.
