dojox.mobile.FixedSplitter

Authors:Yoshiroh Kamiyama
Developers:Yoshiroh Kamiyama
since:V1.7

FixedSplitter is a very simple container widget that layouts its child dom nodes side by side either horizontally or vertically. An example usage of this widget would be to realize the split view on iPad. There is no visual splitter between the children, and there is no function to resize the child panes with drag-and-drop. If you need a visual splitter, you can specify a border of a child dom node with CSS. A child of the widget should be FixedSplitterPane.

../../_images/FixedSplitter.png

Usage

FixedSplitter is in a separate module file from _base.js. You need to dojo.require FixedSplitter as below. If you load FixedSplitter, FixedSplitterPane will be automatically loaded as well.

@import "../themes/common/FixedSplitter.css";
html, body{
    height: 100%;
    overflow: hidden;
    position: relative;
}
dojo.require("dojox.mobile.FixedSplitter");

Constructor Parameters

Parameter Type Default Description
orientation String “H” The direction of split. If “H” is specified, panes are split horizontally. If “V” is specified, panes are split vertically.

Examples

Declarative example1

<div data-dojo-type="dojox.mobile.FixedSplitter" orientation="H">
    <div data-dojo-type="dojox.mobile.FixedSplitterPane" style="width:200px;border-right:1px solid black;background-color:yellow;">
        pane #1 (width=200px)
    </div>
    <div data-dojo-type="dojox.mobile.FixedSplitterPane" style="background-color:pink;">
        pane #2
    </div>
</div>
../../_images/FixedSplitter-example1.png

Declarative example2

<div data-dojo-type="dojox.mobile.FixedSplitter" orientation="V">
    <div data-dojo-type="dojox.mobile.FixedSplitterPane" style="background-color:cyan;height:200px;">
        pane #1 (height=200px)
    </div>
    <div data-dojo-type="dojox.mobile.FixedSplitterPane" style="background-color:yellow;height:100px;border-bottom:1px solid black">
        pane #2 (height=100px)
    </div>
    <div data-dojo-type="dojox.mobile.FixedSplitterPane" style="background-color:pink;">
        pane #3
    </div>
</div>
../../_images/FixedSplitter-example2.png

Programmatic example3

var w = new dojox.mobile.FixedSplitter({
    orientation: "H"
}, dojo.byId("container"));
w.startup();

var p0 = new dojox.mobile.FixedSplitterPane({
    innerHTML: "pane #1 (width=200px)"
});
p0.domNode.style.backgroundColor = "yellow";
p0.domNode.style.width = "200px";
w.addChild(p0);

var p1 = new dojox.mobile.FixedSplitterPane({
    innerHTML: "pane #2"
});
p1.domNode.style.backgroundColor = "pink";
w.addChild(p1);
../../_images/FixedSplitter-example3.png
Error in the documentation? Can’t find what you are looking for? Let us know!