1.声明
1 <!DOCTYPE html> 2 <html > 3 <head> 4 5 <link rel="stylesheet" href="../_static/js/dojo/../dijit/themes/claro/claro.css"> 6 <style type="text/css"> 7 html, body { 8 width: 100%; 9 height: 100%; 10 margin: 0; 11 } 12 </style> 13 <script>dojoConfig = {parseOnLoad: true}</script> 14 <script src='../_static/js/dojo/dojo.js'></script> 15 16 <script> 17 require(["dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/TabContainer", "dijit/layout/AccordionContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionPane"]); 18 </script> 19 </head> 20 <body class="claro"> 21 <div data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%;"> 22 <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Top pane</div> 23 <div data-dojo-type="dijit/layout/AccordionContainer" data-dojo-props="region:'leading'"> 24 <div data-dojo-type="dijit/layout/AccordionPane" title="pane #1">accordion pane #1</div> 25 <div data-dojo-type="dijit/layout/AccordionPane" title="pane #2">accordion pane #2</div> 26 <div data-dojo-type="dijit/layout/AccordionPane" title="pane #3">accordion pane #3</div> 27 </div> 28 <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'center'"> 29 <div data-dojo-type="dijit/layout/ContentPane" title="tab #1">tab pane #1</div> 30 <div data-dojo-type="dijit/layout/ContentPane" title="tab #2">tab pane #2</div> 31 <div data-dojo-type="dijit/layout/ContentPane" title="tab #3">tab pane #3</div> 32 </div> 33 <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'trailing'">Trailing pane</div> 34 <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">Bottom pane</div> 35 </div> 36 </body> 37 </html>
2.
1 <!DOCTYPE html> 2 <html > 3 <head> 4 5 <link rel="stylesheet" href="../_static/js/dojo/../dijit/themes/claro/claro.css"> 6 7 <script>dojoConfig = {parseOnLoad: true}</script> 8 <script src='../_static/js/dojo/dojo.js'></script> 9 10 <script> 11 require([ 12 "dijit/layout/BorderContainer", 13 "dijit/layout/ContentPane", 14 "dijit/layout/TabContainer", 15 "dojo/domReady!" 16 ], function(BorderContainer, ContentPane, TabContainer){ 17 // create a BorderContainer as the top widget in the hierarchy 18 var bc = new BorderContainer({style: "height: 300px; width: 400px;"}); 19 20 // create a ContentPane as the left pane in the BorderContainer 21 var cp1 = new ContentPane({ 22 region: "left", 23 style: "height: 100px", 24 content: "hello world" 25 }); 26 bc.addChild(cp1); 27 28 // create a TabContainer as the center pane in the BorderContainer, 29 // which itself contains two children 30 var tc = new TabContainer({region: "center"}); 31 var tab1 = new ContentPane({title: "tab 1"}), 32 tab2 = new ContentPane({title: "tab 2"}); 33 tc.addChild( tab1 ); 34 tc.addChild( tab2 ); 35 bc.addChild(tc); 36 37 // put the top level widget into the document, and then call startup() 38 document.body.appendChild(bc.domNode); 39 bc.startup(); 40 }); 41 </script> 42 </head> 43 <body class="claro"> 44 45 </body> 46 </html>
