StackContainer
A container that has multiple children, but shows only one child at a time (like looking at the pages in a book one by one). This container is good for wizards, slide shows, and long lists or text blocks.
Examples
Here's a freely pageable document.

This version of the GNU Lesser General Public License incorporates the terms and conditions of version 3 of the GNU General Public License, supplemented by the additional permissions listed below.
As used herein, "this License" refers to version 3 of the GNU Lesser General Public License, and the "GNU GPL" refers to version 3 of the GNU General Public License. "The Library" refers to a covered work governed by this License, other than an Application or a Combined Work as defined below.
You may convey a covered work under sections 3 and 4 of this License without being bound by section 3 of the GNU GPL.
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Stack Container 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.ContentPane");
dojo.require("dijit.layout.StackContainer");
dojo.require("dijit.form.Button");
</script>
</head>
<body class="tundra">
<button id="previous" onClick="dijit.byId('mainTabContainer').back()"><</button>
<button id="next" onClick="dijit.byId('mainTabContainer').forward()">></button>
<div id="mainTabContainer" dojoType="dijit.layout.StackContainer"
style="width: 90%; border:1px solid #9b9b9b; height: 20em;
margin: 0.5em 0 0.5em 0; padding: 0.5em;">
<p id="Page1" dojoType="dijit.layout.ContentPane" label="Intro">
This version of the GNU Lesser General Public License incorporates
the terms and conditions of version 3 of the GNU General Public
License, supplemented by the additional permissions listed below.
<p id="Page2" dojoType="dijit.layout.ContentPane">
As used herein, "this License" refers to version 3 of the GNU Lesser
General Public License, and the "GNU GPL" refers to version 3 of the GNU
General Public License. "The Library" refers to a covered work governed by
this License, other than an Application or a Combined Work as defined below.
<p id="Page3" dojoType="dijit.layout.ContentPane" >
You may convey a covered work under sections 3 and 4 of this License
without being bound by section 3 of the GNU GPL.
</div>
</body></html>
Indication of the current child
As standard, there are no styles on the buttons associated with the StackContainer to indicate which child is currently being shown. However, Dijit adds a "dijitToggleButtonChecked" class to the button for the child being shown and we can use this class to provide styling ourselves. For example, we could use the following rules to highlight the button with a white background and, in Windows high contrast mode, a dashed border:.dijitStackController .dijitToggleButtonChecked button { background-color: white; background-image: none; } .dijit_a11y .dijitStackController .dijitToggleButtonChecked button { border-style: dashed !important; }
dijit.layout.StackContainer
A container of panes, one of which is always on top. Developer must provide navigation controls.
|
||
Attributes
|
||
doLayout | Boolean true |
if true, change the size of my currently displayed child to match my size |
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. | |
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" | |
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) |
Accessibility
Keyboard
Action | Key |
---|---|
Navigate to next tab button | Right arrow |
Navigate to previous tab button | 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
Pub/Sub For this Widget
Pub/Sub:
(Let me know if I've missed any or if the format is funky)