|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<!DOCTYPE HTML><html><head> <meta charset="UTF-8">
<link rel="stylesheet" href="dijit/themes/soria/soria.css">
<style type="text/css">
html,body{
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
}
#appLayout{
height: 100%;
}
#leftCol{
width: 120px;
}
.claro .demoLayout .edgePanel{
background-color: #d0e9fc;
}
</style>
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
</script>
<title>GridContainer学习</title>
</head><body class="soria">
<div class="demoLayout" style="height: 300px; width: 300px" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'">
<div class="demoLayout" style="height: 50%" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'top', splitter: true, design: 'headline'">
<div class="centerPanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">center</div>
<div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'">bottom</div>
</div>
<div class="centerPanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">center</div>
<div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter: true, region: 'left'">left</div>
<div class="demoLayout" style="width: 50%" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'right', design: 'headline'">
<div class="centerPanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">center</div>
<div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left'">left</div>
</div>
<div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter: true, region: 'bottom'">bottom</div>
</div><!-- load dojo and provide config via data attribute --><script src="dojo/dojo.js" data-dojo-config="async:true, parseOnLoad:true"></script>
<script> require(["dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/parser"]);
</script></body></html> |
输出：
本文转自stock0991 51CTO博客，原文链接：http://blog.51cto.com/qing0991/1565113，如需转载请自行联系原作者