AccordionContainer
Like StackContainer and TabContainer, an AccordionContainer holds a set of panes whose titles are all visible, but only one pane's content is visible at a time. Clicking on a pane title slides the currently-displayed one away, similar to a garage door.
Examples
For this example, we'll show the lazy-loading feature of panes. Lazy loading defers the loading process until the pane is actually displayed. Since Dojo does this with XHR, you can only load panes that reside on the server from which the original content came. We'll use a test pane provided with Dijit. You can download this file from the nightly build at http://svn.dojotoolkit.org/dojo/dijit/trunk/tests/layout/tab1.html. For the example to work verbatim, just place it in the same directory as this file on your web server.

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Accordion Demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.AccordionContainer");
</script>
</head>
<body class="tundra">
<div dojoType="dijit.layout.AccordionContainer" duration="200"
style="margin-right: 30px; width: 400px; height: 300px; overflow: hidden">
<!-- content inline -->
<div dojoType="dijit.layout.AccordionPane" selected="true" title="Pane 1">
<p >Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin ...</p >
</div>
<!-- loading by indirect reference -->
<div dojoType="dijit.layout.AccordionPane" title="Pane 2 (lazy load)"
href="/dojoroot/dijit/tests/layout/tab1.html" >
</div>
<div dojoType="dijit.layout.AccordionPane" title="Pane 3">
More content
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
</body>
</html>
dijit.layout.AccordionContainer
Holds a set of AccordionPane widgets and displays the title of every pane, but only one pane is visible at a time. Switching between panes is visualized by sliding the other panes up/down.
|
||
Attributes
|
||
duration | Integer 250 |
Amount of time (in ms) it takes for panes to slide |
Methods
|
||
addChild(/*Widget*/ child, /*Integer?*/ insertIndex) | Process the given child widget, inserting its dom node as a child of our dom node | |
back() | New for 1.0Select previous page. | |
closeChild(/*Widget*/ page) | Close the given widget, like clicking the X button | |
forward() | New for 1.0Select next page. | |
Widget[] getChildren() | returns array of children widgets | |
Widget getNextSibling() | returns the widget "to the right" | |
Widget getParent() | returns the parent widget of this widget, assuming the parent implements dijit._Container | |
Widget getPreviousSibling() | returns the widget "to the left" | |
Boolean hasChildren() | true if this widget has child widgets | |
removeChild(/*Widget*/ page) | removes the passed widget instance from this widget but does not destroy it | |
resize(/* Object */ args) | Explicitly set this widget size (in pixels), and then call layout() to resize contents (and maybe adjust child widgets). Args is of form {w: int, h: int, l: int, t: int}. | |
selectChild(/*Widget*/ page) | Show the given widget (which must be one of my children) |
dijit.layout.AccordionPane
AccordionPane is a ContentPane with a title. Indirect loading with the href property is supported. Nested Dijit layout widgets inside AccordionPane, such as SplitContainer, are not supported at this time.
|
Accessibility
Keyboard
Action | Key |
---|---|
Navigate to next title | Right arrow |
Navigate to previous title | Left arrow |
Navigate into page | Tab |
Navigate to next page | Ctrl + page down, ctrl + tab (except IE7) |
Navigate to previous page | Ctrl + page up |
- Printer-friendly version
- Login or register to post comments
- Unsubscribe post
are the keys platform-specific?
ctrl-tab, for example, goes to the next tabbed browser in FF/Mac. Also, Delete is like the browser back button. Ctrl-w doesn't seem to do anything, and I didn't think we could delete a title.
dijit.layout.AccordionPane support external links?
As AccordionContainer for example.
The attribute of 'href' can work well for text/html file on the server. But as I tested, the 'href' can not work for the external links, such as: www.google.com.
The dijit.layout.AccordionPane support external links?
External Links are Subject to Same-Domain Restriction
This is the same security restriction that governs XHR (since AccordionPane uses XHR). You can get around it by using a proxy script on your server.
Craig Riecke
criecke@dojotoolkit.org
Creating Programmatically
Hi,
I want to create the widget programatically using java script. I cant find any examples where this has been done.
Here is what I want to achieve:
Inside a SplitContainer, I want to have a ContentPane and an AccordionContainer.
Is this achieveable using Java Script?
Any code sample/link would help
Yep, It's Doable
Part 3 is the section to read, which tells you how to programmatically create widgets. But here is a sample (not tested):
var newCP = new dijit.layout.ContentPane({href: "someurl.html"}, sc.domNode);
var newAC = new dijit.layout.AccordionContainer({}, sc.domNode);
newCP.startup();
newAC.startup();
Thanks Criecke
Thanks Criecke
Also a point to note here, I dont think this is documented anywhere, the 'div' which we are using to create these containers have to be appended to the domNode before the layout widget is created else the containers wont show up in the UI
lazy load
hi,
in this example there one content pane that uses lazy load, it loads an external href. but as apposed to the tab container, in the accordion container the internal href page is loaded from server, before the tab is actually clicked and opened,
is there any way to get around it?
like for example detect on the click happen , and only then specify the href value for that pane?
thanks
uri
Lazy Load
The lazy load feature of the accordion pane doesn't appear to function as stated. All content in my panes are loaded on page load even when not selected. I was able to get around the problem like so:
Replace this:
<div dojoType="dijit.layout.AccordionPane" title="Some Title" href="${imageURL}"></div>
With this:
<div dojoType="dijit.layout.AccordionPane" title="Some Title" id="${category}">
<script type="dojo/connect" event="onSelected" args="e">
dijit.byId('${category}').setHref('${imageURL}');
</script>
</div>
In the following code if
In the following code if style does not define the "height: 300px" the AccordianContainer can not expand at all. Does this mean that I will always have to define a height for the AccordianContainers. Should it not have a default height if the style does not define one.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Container Tests</title>
<style type="text/css">
@import "dojoroot/dijit/themes/tundra/tundra.css";
@import "dojoroot/dojo/resources/dojo.css";
</style>
<script type="text/javascript" src="dojoroot/dojo/dojo.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.AccordionContainer");
</script>
</head>
<body class="tundra">
<div dojoType="dijit.layout.AccordionContainer"
duration="1000"
style="margin-right: 30px; width: 400px; overflow: hidden">
<div dojoType="dijit.layout.AccordionPane" selected="true" title="Pane 1">
<p >Content 1</p >
</div>
<div dojoType="dijit.layout.AccordionPane" selected="false" title="Pane 2">
<p >Content 2</p >
</div>
<div dojoType="dijit.layout.AccordionPane" selected="false" title="Pane 3">
<p > Content 3</p >
</div>
</div>
</body>
IE has height and float problems
I've used this setup:
<div id="accordion_container_div" style="position: absolute; top: 1em; bottom: 0px; right: 0px; width: 10em;">
<div dojoType="dijit.layout.AccordionContainer" style="position:absolute; top: 0px; bottom: 0px;">
<div dojoType="dijit.layout.AccordionPane" title="Pane 1">
<p >Content 1</p >
</div>
<div dojoType="dijit.layout.AccordionPane" title="Pane 2">
<p >Content 2</p >
</div>
<div dojoType="dijit.layout.AccordionPane" title="Pane 3">
Content 3
</div>
</div>
</div>
</div>
This gives you good control over where you place your divs and seems to work ok with both IE7 and FF2. I previously used to set the accordion to "height: 100%" but this didn't work in IE7 (didn't expand at all).
I've also noticed that although you can have floating divs inside the AccordionPanes in FF2, it doesnt work in Internet Explorer (the divs float on top of everything and the scroll function becomes buggy). So don't do this:
<div style="float: left;"> Content 1</div>
<div style="float: left;"> Content 2</div>
<div style="float: left;"> Content 3</div>
</div>
No AccordionPanes
With the above code if I use the arrow keys to navigate from pane to pane, sometimes I lose all panes when navigating forward from pane3 to pane1
only working with plain html?
hi,
first of all, thansk for this great piece of code.
I made it work :)
but unfortunatelly when I edit the tab1.html
and I put a "widget" it does not work :(
if I put youtube embeded videos works OK,
but with "script" widgets don't.
I'm trying to use a widget from widgetbox:
Widget
Almost the same problem
Hello,
I think i have almost the same problem. Im trying to put some content including "script" inside a accordionPane. That works great a long as I'm not loading the content from a server with the href tag. Any solutions?
I have found out that it works in Firefox but not in IE.