Ajax Hacks

AccordionContainer

Like a TabContainer, AccordionContainer inherits from StackContainer and is a means of displaying one child at a time from a collection of widgets. The visual difference is that the container looks like a vertical accordion, and animates when each child is selected.

One important difference in how you use AccordionContainer, however, is that you must use a special child container called AccordionPane that provides an explicit wrapper for its child widgets. The actual reasoning for why this is the case is not very interesting and has to do with how the underlying implementation for AccordionContainer. In general, just treat an AccordionPane like a ContentPane and be on your merry way.

As of version 1.1, AccordionPane does not support nested layout widgets such as SplitContainer; virtually all other types of content, however, should work just fine.

Example 14-8 shows a simple AccordionContainer in action.

Example 14-8. Creating an AccordionContainer in markup

<div id="foo" dojoType="dijit.layout.AccordionContainer" style="width:l50px; height:l50px; margin:5px"> <div dojoType="dijit.layout.AccordionPane" title="one"> <p>One fish...</p>

<div dojoType="dijit.layout.AccordionPane" title="two"> <p>Two fish...</p>

<div dojoType="dijit.layout.AccordionPane" title="red"> <p>Red fish...</p>

<div id="blue" dojoType="dijit.layout.AccordionPane" title="blue"> <div dojoType="dijit.layout.ContentPane" href="blueFish"></div> </div> </div>

With respect to API, AccordionContainer itself provides only one additional attribute beyond what StackContainer offers, shown in Table 14-8.

Table 14-8. AccordionContainer API

Name (default)	Type	Comment
duration (250)	Integer	An attribute of AccordionPane that provides the duration in milliseconds that it should take to slide the pane to select another one.

Although we could leave programmatic creation as an exercise for the interested reader, there is a slight difference to creation pattern because AccordionPane is a dijit on its own, as shown in Example 14-9.

Example 14-9. Programmatically creating an AccordionContainer var container = new dijit.layout.AccordionContainer({}, "foo");

var childl = dojo.doc.createElement("div"); childl.innerHTML="pane 1";

var contentl = dojo.doc.createElement("p"); contentl.innerHTML = "content 1";

var ap1 = new dijit.layout.AccordionPane({title: "panel", selected : true}, contentl); container.addChild(ap1);

var child2 = dojo.doc.createElement("div"); child2.innerHTML="pane 2";

var content2 = dojo.doc.createElement("p"); content2.innerHTML = "content 2";

Example 14-9. Programmatically creating an AccordionContainer (continued)

var ap2 = new dijit.layout.AccordionPane({title: "pane2"}, content2); container.addChild(ap2);

container.startup( );

0 0