Dojo学习笔记（十一）：Dojo布局――嵌套样例

发布时间：2020-12-16 21:25:44 所属栏目：百科来源：网络整理

导读：!DOCTYPEHTMLhtmlheadmetacharset="UTF-8"linkrel="stylesheet"href="dijit/themes/soria/soria.css"styletype="text/css"html,body{height:100%;margin:0;overflow:hidden;padding:0;}#appLayout{height:100%;}#leftCol{width:120px;}.claro.demoLayout.edg

<!DOCTYPEHTML>
<html>
<head>
<metacharset="UTF-8">
<linkrel="stylesheet"href="dijit/themes/soria/soria.css">
<styletype="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>
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script>
<scripttype="text/javascript">
</script>
<title>GridContainer学习</title>
</head>
<bodyclass="soria">
<divclass="demoLayout"style="height:300px;width:300px"data-dojo-type="dijit.layout.BorderContainer"data-dojo-props="design:'headline'">
<divclass="demoLayout"style="height:50%"data-dojo-type="dijit.layout.BorderContainer"data-dojo-props="region:'top',splitter:true,design:'headline'">
<divclass="centerPanel"data-dojo-type="dijit.layout.ContentPane"data-dojo-props="region:'center'">center</div>
<divclass="edgePanel"data-dojo-type="dijit.layout.ContentPane"data-dojo-props="region:'bottom'">bottom</div>
</div>
<divclass="centerPanel"data-dojo-type="dijit.layout.ContentPane"data-dojo-props="region:'center'">center</div>
<divclass="edgePanel"data-dojo-type="dijit.layout.ContentPane"data-dojo-props="splitter:true,region:'left'">left</div>
<divclass="demoLayout"style="width:50%"data-dojo-type="dijit.layout.BorderContainer"data-dojo-props="region:'right',design:'headline'">
<divclass="centerPanel"data-dojo-type="dijit.layout.ContentPane"data-dojo-props="region:'center'">center</div>
<divclass="edgePanel"data-dojo-type="dijit.layout.ContentPane"data-dojo-props="region:'left'">left</div>
</div>
<divclass="edgePanel"data-dojo-type="dijit.layout.ContentPane"data-dojo-props="splitter:true,region:'bottom'">bottom</div>
</div>
<!--loaddojoandprovideconfigviadataattribute-->
<scriptsrc="dojo/dojo.js"data-dojo-config="async:true,parSEOnLoad:true"></script>
<script>
require(["dijit/layout/BorderContainer","dijit/layout/ContentPane","dojo/parser"]);
</script>
</body>
</html>

输出：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!