ColdFusion 9 UI Enhancements: Creating Accordion Navigation Using CFLayout tag

  Jul 21, 2009     27728 Views      ColdFusion       Comments (5)   

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.

<html>
<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>

CFLayout with Accordion Example

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.

Comments

1. Phillip Senn on Jul 22, 2009 at 10:47 AM

That's nice.
I applied it here temporarily.
http://adobecharlotte.coldfusion9.beta.hostek.com/...

Can the accordion have some animation?

2. Jonathan on Mar 4, 2010 at 6:12 PM

Seems like it has a bug where only the first item is populated. The title collapse doesn't work either.

3. prim on Apr 21, 2010 at 2:44 PM

Is it possible to have this feature available in CF8? I mean if I use some kind of extensions or library? But where can I find them to achieve the same feature in ColdFusion 8. Thanks

4. Akbarsait on Apr 21, 2010 at 9:49 PM

@Prim Yes you can implement Accordion navigation in CF 8 with some external JS libraries.

- Adobe Spry http://labs.adobe.com/technologies/spry/articles/a...
- jQuery UI http://docs.jquery.com/UI/Accordion

5. mike on Aug 5, 2010 at 2:42 PM

Can the + / - icons be replaced or deleted?

Also, can i have different colors for each accordion?

Thanks
Mike

About Me

CFML/Web/Cloud/Data/Agile Enthusiast, Husband & Dad, an avid learner & android fan who works as a Tech Consultant in Toronto, Canada.

GetCFMLJobs.com!
Get Your Next CFML Job!
ColdFusion Tuts
ColdFusion Tutorials & Resources


Categories

Adobe Agile AppCore Creator BlogCFC Books Bootstrap CFBuilder CFEclipse CFML Chennai CFUG Chrome Extensions ColdFusion Google IIS India Learning MySQL Railo Subversion Tools & Utilities Web Windows 7


Archives

2021 2018 2017 2016 2014 2013 2012 2011 2010 2009 2008

Search


Akbarsait © 2008 - 2023 | Hosting provided by Vivio Technologies

Home | Blog | Sitemap | RSS Feed