<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<link rel="stylesheet" href="//localhost/common/libs/dojo-release-1.9.3/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="//localhost/common/libs/dojo-release-1.9.3/dijit/themes/soria/soria.css" />
<link rel="stylesheet" href="//localhost/common/libs/dojo-release-1.9.3/dijit/themes/nihilo/nihilo.css" />
<link rel="stylesheet" href="//localhost/common/libs/dojo-release-1.9.3/dijit/themes/tundra/tundra.css" />
<script>
dojoConfig={
async:true
};
</script>
<style>
html, body {
width:100%;height:100%;overflow:hidden;margin:0;padding:0;
font-family:Verdana, Helvetica, sans-serif;
font-size:9pt;
}
</style>
<script src="//localhost/common/libs/dojo-release-1.9.3/dojo/dojo.js"></script>
<script>
var appStyle = "claro";
require(["dojo/dom", "dojo/on", "dojo/dom-construct", "dojo/dom-style", "dojo/dom-attr",
"dojo/domReady!"], function (dom, on, domConstruct, domStyle, domAttr){
domAttr.set(document.body, "class", appStyle);
document.body.appendChild(domConstruct.create("div", {
id:"app",
style:"width:100%;height:100%;"
}));
});
require(["dojo/dom", "dojo/on", "dojo/dom-construct", "dojo/dom-style", "dojo/dom-attr",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer",
"dojo/domReady!"],
function (dom, on, domConstruct, domStyle, domAttr, BorderContainer, ContentPane, AccordionContainer){
var app = new BorderContainer({
id:"appContainer",
design:"headline"
}, dom.byId("app"));
var topPane = new ContentPane({
id:"topPane",
region:"top",
style:"background-color:#E1EBFD;height:auto;"
}, dom.byId("headerDiv"));
var leftPane = new ContentPane({
id:"leftPane",
region:"left",
splitter:true,
style:"background-color:#E1EBFD;width:25%;padding:0; margin:0;"
});
var mainPane = new ContentPane({
id:"mainPane",
region:"center"
});
app.addChild(topPane);
app.addChild(leftPane);
app.addChild(mainPane);
app.startup();
// -----------------------------------------
var ctnr = new AccordionContainer({
style:"height:100%"
});
ctnr.addChild(new ContentPane({
title: "This is a content pane",
content: "Hi!"
}));
ctnr.addChild(new ContentPane({
title:"This is as well",
content:"Hi how are you?"
}));
ctnr.addChild(new ContentPane({
title:"This too",
content:"Hello im fine.. thnx"
}));
leftPane.addChild(ctnr);
ctnr.resize();
});
</script>
Sunday, May 4, 2014
Dojo 1.9 Layout Example
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment