Login Register

SplitContainer

Contains multiple children widgets, all of which are displayed side by side (either horizontally or vertically); there's a bar between each of the children, and you can adjust the relative size of each child by dragging the bars. You must specify a size (width and height) for the SplitContainer.

Example

<!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>SplitContainer 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.SplitContainer");
       dojo.require("dijit.layout.ContentPane");
     </script>
</head>
<body class="tundra">
        <div dojoType="dijit.layout.SplitContainer"
                orientation="horizontal"
                sizerWidth="7"
                activeSizing="true"
                style="border: 1px solid #bfbfbf; width: 400px; height: 300px;">

                <div dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="20">
                    <b>The Dojo Toolkit</b>
                    
                        Dojo is an Open Source DHTML toolkit written in JavaScript. It
                        builds on several contributed code bases (nWidgets, Burstlib, f(m)),
                        which is
                        why we refer to it sometimes as a "unified" toolkit. Dojo aims to
                        solve some long-standing historical problems with DHTML which
                        prevented mass adoption of dynamic web application development.
                       
                </div>
                <div dojoType="dijit.layout.ContentPane" sizeMin="50" sizeShare="50">
                    <b>Swedish Chef Translation</b>
                    
                        Duju is un Oopee Suoorce-a DHTML tuulkeet vreettee in JefeScreept.
                        Um de hur de hur de hur. It booeelds oon seferel cuntreebooted
                        cude-a beses (nVeedgets, Boorstleeb, f(m)),
                        vheech is vhy ve-a reffer tu it sumeteemes es
                        a "uneeffied" tuulkeet. Um de hur de hur de hur.
                        Duju eeems tu sulfe-a sume-a lung-stundeeng heesturicel
                        prublems veet DHTML vheech prefented mess edupshun
                        ooff dynemeec veb eppleeceshun defelupment. Um de hur de
                        hur de hur.
                       
                </div>
        </div>
</body></html>
dijit.layout.SplitContainer
Container with resizable dividers.
Attributes
activeSizing Boolean
false
If true, the children's size changes as you drag the bar; otherwise, the sizes don't change until you drop the bar (by mouse-up)
orientation String
horizontal
either 'horizontal' or vertical; indicates whether the children are arranged side-by-side or up/down.
persist Boolean
true
Save splitter positions in a cookie
sizerWidth Integer
7
Size in pixels of the bar between each child
Methods
addChild(/*Widget*/ child, /*Integer?*/ insertIndex) Process the given child widget, inserting its dom node as a child of our dom node
Widget[] getChildren() returns array of children widgets
Widget getParent() returns the parent widget of this widget, assuming the parent implements dijit._Container
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}.

Sizing

sizeShare

Setting the sizeShare attribute on any child widgets of a SplitContainer sets the initial relative size of that widget, either its height or width depending on the layout of the SplitContainer. The value of sizeShare is not a percentage or a pixel measure. Its value is relative to other child widgets of the same SplitContainer. So, for example, given four child widgets and each having a sizeShare attribute of 25, would evenly divide the SplitContainer into four parts. However, giving each a sizeShare attribute of 10 or 1 would achieve the same result, as the values are computed relative to each other - they do not have to add up to 100.

sizeMin

Setting the sizeMin attribute on any child widget of a SplitContainer defines the smallest size, in pixels, that the child widget will be changed to. The value is specified as an integer, without "px" appended to it.

Accessibility (added for 1.0)

Keyboard

In Dojo 1.0 there is no keyboard mechanism to resize the split container. In Firefox the content panes within a split container will be in the tab order (this is default FF behavior) so if the data is not visible, the user can use the arrow keys to scroll the data into view. This allows keyboard access to all of the data and thus accessibility requirements are met by default in Firefox. IE does not include the content pane in the tab order. If there is a chance that all of the data will not being visible within a pane of a split container, a tabindex=0 should be included in the markup of the inner content pane to ensure keyboard accessibility in both Firefox and IE.