Simple layout Code
|
<!DOCTYPE HTML> <html lang="en"> <head> <style> html, body { height: 100%; margin: 0; overflow: hidden; padding: 0; } #appLayout { height: 100%; } #leftCol { width: 14em; } .claro .demoLayout .edgePanel { background-color: #d0e9fc; } </style> <meta charset="utf-8"> <title>Demo: BorderContainer</title> <link rel="stylesheet" href="dojo-release-1.9.1/dijit/themes/claro/claro.css" media="screen"> </head> <body class="claro"> <div id="appLayout" class="demoLayout" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline'"> <div class="centerPanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">center(center)</div> <div class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'top'">Header content (top)</div> <div id="leftCol" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'left'">Sidebar content (left)</div> <div id="bottom" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'">bottombar content (bottom)</div> </div> <!-- load dojo --> <script src="dojo-release-1.9.1/dojo/dojo.js"></script> <script> require(["dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"], function(parser){ parser.parse(); }); </script> </body> </html> |
Table 1 Dojo Simple layout Code
코드 설명
region으로 ContentPane의 위치를 결정할 수 있는데 region의 옵션으로 top, left, right, center, bottom이 있다. right와 left만 설정하면 페이지의 중간이 비는 현상이 발생한다.
결과 화면
Figure 1 Table1 결과 화면