Login Register

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.

<!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

ActionKey
Navigate to next tab buttonRight arrow
Navigate to previous tab buttonLeft arrow
Navigate into pageTab
Navigate to next pageCtrl + page down, ctrl + tab (except IE7)
Navigate to previous pageCtrl + page up
Delete a tabDelete, ctrl + w (updated for 1.0 - delete is not supported in stack container)

Pub/Sub For this Widget

Pub/Sub:

  • Topic : Object Expected -> Local Function it routes to
  • <widgetid>-startup : [{children: children, selected: selected}] -> onStartup(obj)
  • <widgetid>-addChild : [childPage, insertIndex] -> onAddChild(childPage, insertIndex)
  • <widgetid>-removeChild : [pageWidget] -> onRemoveChild(pageWidget)
  • <widgetid>-selectChild : [pageWidget] -> onSelectChild(pageWidget)
  • <widgetid>-containerKeyPress : [{ e: e, page: thisWidget}] -> onContainerKeyPress(obj)

(Let me know if I've missed any or if the format is funky)