Subversion Repositories Applications.papyrus

Rev

Blame | Last modification | View Log | RSS feed 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
        <title>SplitContainer Widget Demo</title>

        <script type="text/javascript" src="../../../dojo/dojo.js"
                djConfig="isDebug: true, parseOnLoad: true"></script>
        <script type="text/javascript" src="../_testCommon.js"></script>

        <script type="text/javascript">
                dojo.require("dijit.layout.SplitContainer");
                dojo.require("dijit.layout.ContentPane");
                dojo.require("dojo.parser");    // scan page for widgets and instantiate them
        </script>
        <style type="text/css">
                @import "../../../dojo/resources/dojo.css";
                @import "../css/dijitTests.css";
                .dojoContentPane {
                        padding:1em;
                }
        </style>
</head>
<body>
        <h1 class="testTitle">Dijit Split Container Test</h1>
        <p>HTML before</p>

        <div dojoType="dijit.layout.SplitContainer"
                orientation="vertical"
                sizerWidth="7"
                activeSizing="false"
                style="border: 1px solid #bfbfbf; float: left; margin-right: 30px;  width: 400px; height: 300px;"
        >
                <div dojoType="dijit.layout.ContentPane" sizeMin="10" sizeShare="50">
                        this box has three split panes
                </div>
                <div dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="50"
                        style="background-color: yellow; border: 3px solid purple;">
                        in vertical mode
                </div>
                <div dojoType="dijit.layout.ContentPane" sizeMin="10" sizeShare="50">
                        without active resizing
                </div>
        </div>

        <div dojoType="dijit.layout.SplitContainer"
                orientation="horizontal"
                sizerWidth="7"
                activeSizing="true"
                style="border: 1px solid #bfbfbf; float: left; width: 400px; height: 300px;">
                <div dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="20">
                        this box has two horizontal panes
                </div>
                <div dojoType="dijit.layout.ContentPane" sizeMin="50" sizeShare="50">
                        with active resizing, a smaller sizer, different starting sizes and minimum sizes
                </div>
        </div>

        <p style="clear: both;">HTML after</p>

the following splitter contains two iframes, see whether the resizer works ok in this situation
<div dojoType="dijit.layout.SplitContainer"
        orientation="horizontal"
        sizerWidth="5"
        activeSizing="false"
        style="border: 2px solid black; float: left; width: 100%; height: 300px;"
>
        <div dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="20">
                <iframe style="width: 100%; height: 100%"></iframe>
        </div>
        <div dojoType="dijit.layout.ContentPane" sizeMin="50" sizeShare="50">
                <iframe style="width: 100%; height: 100%"></iframe>
        </div>
</div>

</body>
</html>