dojo------dojox.layout.ContentPane 内容面板编程式和声明式

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>

 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>

posted on 2017-01-05 13:56 Sharpest 阅读(284) 评论(0) 收藏举报