dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
59 lines (55 loc) • 2.19 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>dijit/layout/BorderContainer Test - Full Screen</title>
<script src="../boilerplate.js"></script>
<style type="text/css">
html, body, #main{
width: 100%; /* make the body expand to fill the visible window */
height: 100%;
overflow: hidden; /* erase window level scrollbars */
padding: 0 0 0 0;
margin: 0 0 0 0;
font: 10pt Arial,Myriad,Tahoma,Verdana,sans-serif;
}
</style>
<script type="text/javascript">
require([
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/FilteringSelect",
"dojo/domReady!"
], function(parser){
parser.parse();
});
</script>
</head>
<body class="claro" role="main">
<div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='design:"sidebar" '>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"main-leading", region:"leading", style:"background-color: #acb386; width: 100px;"'>
leading
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"main-top", region:"top", style:"background-color: #b39b86; height: 100px;"'>
top bar
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"main-center", region:"center", style:"background-color: #f5ffbf; padding: 10px;"'>
main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
(to check we're copying children around properly).<br />
<select aria-label="select" data-dojo-type="dijit/form/FilteringSelect">
<option value="1">foo</option>
<option value="2">bar</option>
<option value="3">baz</option>
</select>
Here's some text that comes AFTER the combo box.
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"main-bottom", region:"bottom", style:"background-color: #b39b86; height: 100px;", splitter:true'>
bottom bar
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"main-trailing", region:"trailing", style:"background-color: #acb386; width: 100px;", splitter:true'>
trailing
</div>
</div>
</body>
</html>