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>Layout Demo</title>


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

        <script type="text/javascript">
                dojo.require("dijit.layout.LayoutContainer");
                dojo.require("dijit.layout.ContentPane");
                dojo.require("dijit.layout.LinkPane");
                dojo.require("dijit.layout.SplitContainer");
                dojo.require("dijit.layout.TabContainer");
                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";

                html, body{     
                        width: 100%;    /* make the body expand to fill the visible window */
                        height: 100%;
                        padding: 0 0 0 0;
                        margin: 0 0 0 0;
                }
                .dijitSplitPane{
                        margin: 5px;
                }
                #rightPane {
                        margin: 0;
                }
        </style>
        <script>
                dojo.addOnLoad(function(){
                        // use "before advice" to print log message each time resize is called on a layout widget
                        var origResize = dijit.layout._LayoutWidget.prototype.resize;
                        dijit.layout._LayoutWidget.prototype.resize = function(mb){
                                console.log(this + ": resize(" + (mb ? "{w:"+ mb.w + ", h:" + mb.h + "}" : "null") +")" );
                                origResize.apply(this, arguments);
                        };

                        dojo.connect(dijit.layout.ContentPane.prototype, "resize", function(mb){
                                console.log(this + ": resize({w:"+ mb.w + ", h:" + mb.h + "})");
                        });
                });
        </script>
</head>
<body>
        <div id="outer" dojoType="dijit.layout.LayoutContainer"
                style="width: 100%; height: 100%;">
                <div id="topBar" dojoType="dijit.layout.ContentPane" layoutAlign="top"
                        style="background-color: #274383; color: white;">
                        top bar
                </div>
                <div id="bottomBar" dojoType="dijit.layout.ContentPane" layoutAlign="bottom"
                        style="background-color: #274383; color: white;">
                        bottom bar
                </div>
                <div id="horizontalSplit" dojoType="dijit.layout.SplitContainer"
                        orientation="horizontal"
                        sizerWidth="5"
                        activeSizing="0"
                        layoutAlign="client"
                >
                        <div id="leftPane" dojoType="dijit.layout.ContentPane"
                                 sizeMin="20" sizeShare="20">
                                Left side
                        </div>

                        <div id="rightPane"
                                dojoType="dijit.layout.SplitContainer"
                                orientation="vertical"
                                sizerWidth="5"
                                activeSizing="0"
                                sizeMin="50" sizeShare="80"
                        >
                                <div id="mainTabContainer" dojoType="dijit.layout.TabContainer" sizeMin="20" sizeShare="70">

                                        <a id="tab1" dojoType="dijit.layout.LinkPane" href="tab1.html">Tab 1</a>

                                        <a id="tab2" dojoType="dijit.layout.LinkPane" href="tab2.html">Tab 2</a>
                                </div>
                                <div id="bottomRight" dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="30">
                                        Bottom right<br>
                                        Bottom right<br>
                                        Bottom right<br>
                                        Bottom right<br>
                                        Bottom right<br>
                                        Bottom right<br>
                                        Bottom right<br>
                                        Bottom right<br>
                                        Bottom right<br>
                                        Bottom right<br>
                                        Bottom right<br>
                                        Bottom right<br>
                                        Bottom right<br>
                                        Bottom right<br>
                                        Bottom right<br>
                                        Bottom right<br>
                                        Bottom right<br>
                                        Bottom right<br>
                                        Bottom right<br>
                                        Bottom right<br>
                                </div>
                        </div>
                </div>
        </div>
</body>
</html>