ColdFusion 9 UI Enhancements: Creating Accordion Navigation Using CFLayout tag
Posted : Jul 21, 2009 by Akbarsait
Tags:
ColdFusion 9
,
ColdFusion
The UI Enhancement in ColdFusion 9 includes many new AJAX control tags and enhancement to the existing UI controls in ColdFusion 8. The AJAX controls in ColdFusion leverages the ExtJS 3.0 Library for to create Rich UI Controls. The new addition is Accordion navigation to CFLayout tag. The accordion is very useful for compressing many elements in a compacts space in our web sites. Using the below code we can create accordion navigation in ColdFusion very easily.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Using Accordion in CFLayout</title>
</head>
<body>
<h3>Using Accordion in CFLayout</h3>
<cflayout name="myAccordionLayout" type="accordion" width="600px">
<cflayoutarea title="ColdFusion 9 Tutorials" align="left">
<h3>ColdFusion 9 Tutorials</h3>
<p>ColdFusion 9 Tutorials.</p>
</cflayoutarea>
<cflayoutarea title="CFScript Enhancement Tutorials">
<h3>ColdFusion Builder Tutorials</h3>
<p>CFScript Enhancement Tutorials</p>
</cflayoutarea>
<cflayoutarea title="ColdFusion As a Serveice Tutorials" align="left">
<h3>ColdFusion 9 Tutorials</h3>
<p>ColdFusion As a Serveice Tutorials</p>
</cflayoutarea>
<cflayoutarea title="Hibernate-based ORM Tutorials" align="left">
<h3>ColdFusion Builder Tutorials</h3>
<p>Hibernate-based ORM Tutorials</p>
</cflayoutarea>
</cflayout>
</body>
</html>
Each Accordion navigation generated using CFLayout tag will have a + or - button on the title area for to expand and collapse the accordion. By default the layout area will expand and collapse by clicking anywhere in the accordion title bar. This can be prevented using the attribute titleCollapse which makes the layout area will be expandable and collapsible only by clicking the + or - button in the title bar.
I applied it here temporarily.
http://adobecharlotte.coldfusion9.beta.hostek.com/...
Can the accordion have some animation?
- Adobe Spry http://labs.adobe.com/technologies/spry/articles/a...
- jQuery UI http://docs.jquery.com/UI/Accordion
Also, can i have different colors for each accordion?
Thanks
Mike