http://dojotoolkit.org/reference-guide/1.8/dijit/layout.html
效果：
核心代码：
- <div data-dojo-type="BorderContainer" style="width: 100%; height: 100%;">
- <div data-dojo-type="ContentPane" data-dojo-props="region:'top'">Top pane</div>
- <div data-dojo-type="AccordionContainer" data-dojo-props="region:'leading'">
- <div data-dojo-type="AccordionPane" title="pane #1">accordion pane #1</div>
- <div data-dojo-type="AccordionPane" title="pane #2">accordion pane #2</div>
- <div data-dojo-type="AccordionPane" title="pane #3">accordion pane #3</div>
- </div>
- <div data-dojo-type="TabContainer" data-dojo-props="region:'center'">
- <div data-dojo-type="ContentPane" title="tab #1">tab pane #1</div>
- <div data-dojo-type="ContentPane" title="tab #2">tab pane #2</div>
- <div data-dojo-type="ContentPane" title="tab #3">tab pane #3</div>
- </div>
- <div data-dojo-type="ContentPane" data-dojo-props="region:'trailing'">Trailing pane</div>
- <div data-dojo-type="ContentPane" data-dojo-props="region:'bottom'">Bottom pane</div>
- </div>
完整代码：
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Insert title here</title>
- <style type="text/css">
- html,body {
- width: 100%;
- height: 100%;
- margin: 0;
- }
- </style>
- <script type="text/javascript" src="js/dojo/dojo.js" data-dojo-config="parSEOnLoad:true"> </script>
- <link rel="stylesheet" href="js/dijit/themes/claro/claro.css" />
- <script type="text/javascript">
- require(["dojo/parser","dijit/layout/BorderContainer","dijit/layout/TabContainer","dijit/layout/AccordionContainer","dijit/layout/ContentPane","dijit/layout/AccordionPane"]);
- </script>
- </head>
- <body class="claro">
- <div data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%;">
- <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Top pane</div>
- <div data-dojo-type="dijit/layout/AccordionContainer" data-dojo-props="region:'leading'">
- <div data-dojo-type="dijit/layout/AccordionPane" title="pane #1">accordion pane #1</div>
- <div data-dojo-type="dijit/layout/AccordionPane" title="pane #2">accordion pane #2</div>
- <div data-dojo-type="dijit/layout/AccordionPane" title="pane #3">accordion pane #3</div>
- </div>
- <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'center'">
- <div data-dojo-type="dijit/layout/ContentPane" title="tab #1">tab pane #1</div>
- <div data-dojo-type="dijit/layout/ContentPane" title="tab #2">tab pane #2</div>
- <div data-dojo-type="dijit/layout/ContentPane" title="tab #3">tab pane #3</div>
- </div>
- <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'trailing'">Trailing pane</div>
- <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">Bottom pane</div>
- </div>
- </body>
- </html>
效果：
代码：