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.

/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #b1b100;} .geshifilter .kw2 {color: #000000; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .coMULTI {color: #808080; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #ff0000;} .geshifilter .nu0 {color: #cc66cc;} .geshifilter .sc0 {color: #00bbdd;} .geshifilter .sc1 {color: #ddbb00;} .geshifilter .sc2 {color: #009900;}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

            "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
~~Delete a tab~~	~~Delete, ctrl + w~~ (updated for 1.0 - delete is not supported in stack container)