Introduction

There already a lot of components in the ZK framework. In this blog post, I will introduce a new one that I have created: Accordion, a horizontal accordion component that is based on liteAccordion, a jQuery plug-in.

Accordion includes the following features:

  • Supports any ZK components as children
  • Supports all the native themes (basic, dark, light and stitch)
  • Cross-browser compatibility
  • Good look and feel
  • Downsized

Demo

Following is an example of how you can use the component:

<accordion>
  <accordionpanel title="Title A">
    <window title="A Window">
      <label value="AAA" />
    </window>
  </accordionpanel>
  <accordionpanel title="Title B">
    <window title="B Window">
      <label value="BBB" />
    </window>
  </accordionpanel>
</accordion>

As shown above, you can place any ZK component inside an accordionpanel. The Accordion component also supports the onSelect event, fired when you select an accordionpanel. Like in the demo, accordionpanel‘s child components can be added or removed dynamically as shown below:

  // ac refers to the parent Accordion
  // Dynamically add a new accordion panel
  Accordionpanel p = new Accordionpanel();
  p.setTitle("New Empty Panel");
  ac.appendChild(p);

  // Dynamically remove a selected accordion panel
  Accordionpanel p = ac.getSelectedpanel();
  if (p != null) {
    ac.removeChild(p);
  }

Download
You can download the component and the demo application here.

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

8 Responses to “Introducing Accordion Component”

  1. Andreas Boos says:

    Very nice

  2. William says:

    Nice!

    Do you have any plans of making this compatible with zk 6 and to implement full flexibility to the widget?

  3. Jumper Chen says:

    Yes, please post a feature for this. – http://tracker.zkoss.org/secure/Dashboard.jspa

    Thanks,
    Jumper

  4. William says:

    Already added some days ago:

    http://tracker.zkoss.org/browse/ZK-1325

  5. Rumenigg says:

    Hi, I liked this component and I’m tring to use in my project, so I’m new in Zkoss and I don’t know how to use. Can you help me? Can you say me how can I integrate in my project?
    Thanks a lot!

  6. Fernando says:

    I can not make it work in zk 6.0.5. Does it work on this version?

  7. Fernando says:

    I can not make it work in zk 6.5.0. Does it work on this version?

  8. Fernando says:

    I also work with the 508 version, remains the message processing

Leave a Reply