仔细对照代码,在看看图,必有收获。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Nested BorderContainer</title>
<link rel="stylesheet" href="css/demo.css" media="screen">
<link rel="stylesheet" href="css/style.css" media="screen">
<link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
</head>
<body class="claro">
<div class="demoLayout" style="height: 650px; width: 950px" 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'">I am the Center in the 1~First BorderContainer</div>
<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'">I am the center in the 2~second BorderContainer=first BC 's top </div>
<div class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'"> I am the bottom in the 2~second BorderContainer=first BC 's top</div>
</div>
<div class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter: true, region: 'left'">I am left content Pane in the 1~First BorderContainer</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'">I am the center in the 3 ~Third BorderContainer=firstBC's Right</div>
<div class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'left'">I am the left in the 3 ~Third BorderContainer=firstBC's Right</div>
</div>
<div class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter: true, region: 'bottom'">I am the bottom content pane in the !~First BorderContainer's Bootom </div>
</div>
<!-- load dojo -->
<script src="dojo/dojo.js"></script>
<script>
require(["dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"], function(parser){
parser.parse();
});
</script>
</body>
</html>