dojo布局(layout)

使用BorderContainer和ContentPane实现布局

1、效果图如下：

2、HTML代码：

<div id="appLayout" class="demoLayout" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline'">
    <div class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'top'">Header content (top)</div>
    <div id="leftCol" class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'left'">Sidebar content (left)</div>
    <div id="rigthCol" class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">Sidebar content (left)</div>
</div>

3、CSS：

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

#appLayout {
    height: 100%;
}
#leftCol {
    width: 14em;
}
.claro .demoLayout .edgePanel {
    background-color: #d0e9fc;
}

4、引用

 

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" media="screen">
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

 

5、没有JS代码