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.
Warning
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:150px; height:150px; margin:5px"> <div dojoType="dijit.layout.AccordionPane" title="one"> <p>One fish...</p> </div> <div dojoType="dijit.layout.AccordionPane" title="two"> <p>Two fish...</p> </div> <div dojoType="dijit.layout.AccordionPane" title="red"> <p>Red fish...</p> </div> <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 |
---|---|---|
| Integer | An attribute of
|
Although we could leave programmatic creation as an exercise for
the interested reader, there is a slight difference to the 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 content1 = dojo.doc.createElement("p"); content1.innerHTML = "content 1"; var ap1 = new dijit.layout.AccordionPane({title: "pane1", selected : true}, content1); container.addChild(ap1); var content2 = dojo.doc.createElement("p"); content2.innerHTML = "content 2"; var ap2 = new dijit.layout.AccordionPane({title: "pane2"}, content2); container.addChild(ap2); container.startup( );
Get Dojo: The Definitive Guide now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.