4. dojo Dijit 的布局特性

1内容窗格（panes

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 <title>Insert title here</title>
 5 <script type="text/javascript" src="js/dojo/dojo.js"
 6     djConfig="parseOnLoad: true"></script>
 7 
 8 <style type="text/css">
 9 @import "js/dijit/themes/tundra/tundra.css";
10 </style>
11 
12 </head>
13 <body class="tundra">
14 <!-- 使用 Dijit 的布局特性 内容窗格（panes） -->
15     <script type="text/javascript">
16      dojo.require("dijit.form.Button");
17      dojo.require("dijit.layout.ContentPane");
18      
19      dojo.addOnLoad(function(){
20          
21          var button = dijit.byId("myButton");
22          var contentPane = dijit.byId("myContentPane");
23          
24          dojo.connect(button,"onClick",null,function(evt){
25              contentPane.attr("href","content.html");
26          });
27          
28      });
29     </script>
30     <h1>
31         <button dojoType="dijit.form.Button" id="myButton">Load
32             content using XHR</button>
33         <div dojoType="dijit.layout.ContentPane" id="myContentPane">
34             <h1>Static content here!</h1>
35         </div>
36     </h1>
37 </body>
38 </html>

2.堆叠容器

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 <title>Insert title here</title>
 5 <script type="text/javascript" src="js/dojo/dojo.js"
 6     djConfig="parseOnLoad: true"></script>
 7 
 8 <style type="text/css">
 9 @import "js/dijit/themes/tundra/tundra.css";
10 </style>
11 
12 </head>
13 <body class="tundra">
14     <!-- 堆叠容器 -->
15     <script type="text/javascript">
16     dojo.require("dijit.layout.StackContainer");
17     dojo.require("dijit.layout.StackController");
18     dojo.require("dijit.layout.ContentPane");
19         dojo.addOnLoad(function() {
20 
21         });
22     </script>
23     <div dojoType="dijit.layout.StackContainer" id="stackContainer">
24         <div dojoType="dijit.layout.ContentPane" title="Stack 1">This is
25             the content in stack 1.</div>
26         <div dojoType="dijit.layout.ContentPane" title="Stack 2">This is
27             the content in stack 2.</div>
28     </div>
29     <div dojoType="dijit.layout.StackController"
30         containerId="stackContainer"></div>
31 </body>
32 </html>

3.选项卡容器

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 <title>Insert title here</title>
 5 <script type="text/javascript" src="js/dojo/dojo.js"
 6     djConfig="parseOnLoad: true"></script>
 7 
 8 <style type="text/css">
 9 @import "js/dijit/themes/tundra/tundra.css";
10 </style>
11 
12 </head>
13 <body class="tundra">
14     <!-- 选项卡容器 -->
15     <!-- js方式 -->
16     <script type="text/javascript">
17     dojo.require("dijit.layout.TabContainer");
18     dojo.require("dijit.layout.ContentPane");
19     dojo.require("dijit.layout.ContentPane");
20         dojo.addOnLoad(function() {
21                 
22             var tab = new dijit.layout.TabContainer({
23                 style: "height: 100%; width: 100%;"
24             }, "tabContainer");
25 
26             var con1 = new dijit.layout.ContentPane({
27                 title:"tab1",
28                 content:"This is the content in tab 1."
29             });
30             var con2 =  new dijit.layout.ContentPane({
31                 title:"tab2",
32                 content:"This is the content in tab 1."
33             });
34             tab.addChild(con1);
35             tab.addChild(con2);
36             tab.startup();
37         });
38     </script>
39     
40     <!-- 声明方式 -->
41 <!--     <div style="width: 535px; height: 290px">
42     <div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;">
43         <div dojoType="dijit.layout.ContentPane" title="Tab 1">
44             This is the content in tab 1.
45         </div>
46         <div dojoType="dijit.layout.ContentPane" title="Tab 2">
47             This is the content in tab 2.
48         </div>
49     </div> -->
50      <div id="tabContainer">
51      
52 </div>
53 </body>
54 </html>

4.折叠容器

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 <title>Insert title here</title>
 5 <script type="text/javascript" src="js/dojo/dojo.js"
 6     djConfig="parseOnLoad: true"></script>
 7 
 8 <style type="text/css">
 9 @import "js/dijit/themes/tundra/tundra.css";
10 </style>
11 
12 </head>
13 <body class="tundra">
14     <!-- 折叠容器 -->
15     <!-- js -->
16     <script type="text/javascript">
17     dojo.require("dijit.layout.AccordionContainer");
18     dojo.require("dijit.layout.ContentPane");
19         dojo.addOnLoad(function() {
20             <!-- dijit.layout.AccordionContainer({},"acc");   {}没有也要加 -->
21             var acc = new dijit.layout.AccordionContainer({},"acc");
22             var con1 = new dijit.layout.ContentPane({
23                 title:"b1",
24                 content:"1111111111111"
25             });
26             var con2 = new dijit.layout.ContentPane({
27                 title:"b2",
28                 content:"2222222222222"
29             });
30             var con3 = new dijit.layout.ContentPane({
31                 title:"b3",
32                 content:"3333333333333"
33             });
34             acc.addChild(con1);
35             acc.addChild(con2);
36             acc.addChild(con3);
37             acc.startup();
38         });
39     </script>
40     
41     <!--声明方式-->
42 <!-- <div style="width: 535px; height: 290px">
43     <div dojoType="dijit.layout.AccordionContainer" style="width: 100%; 
44 height: 100%;">
45          <div dojoType="dijit.layout.ContentPane" title="Blade 1">
46              This is the content in blade 1.
47          </div>
48          <div dojoType="dijit.layout.ContentPane" title="Blade 2">
49              This is the content in blade 2.
50          </div>
51         <div dojoType="dijit.layout.ContentPane" title="Blade 3">
52             This is the content in blade 3.
53         </div>
54     </div>
55 </div> -->
56     <div id="acc"></div>
57      
58 </body>
59 </html>

5.边框容器布局

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 <title>Insert title here</title>
 5 <script type="text/javascript" src="js/dojo/dojo.js"
 6     djConfig="parseOnLoad: true"></script>
 7 
 8 <style type="text/css">
 9 @import "js/dijit/themes/tundra/tundra.css";
10 </style>
11 
12 </head>
13 <body class="tundra">
14     <!-- 边框容器布局 -->
15     <!-- js -->
16     <script type="text/javascript">
17     dojo.require("dijit.layout.BorderContainer");
18     dojo.require("dijit.layout.ContentPane");
19         dojo.addOnLoad(function() {
20             var bor = new dijit.layout.BorderContainer({
21                 style:"height: 100%; width: 100%;"
22                 },"bor");
23             var con1 = new dijit.layout.ContentPane({
24                 content:"11111111111111111111",
25                 region:"top"
26             });
27             var con2 = new dijit.layout.ContentPane({
28                 content:"222222222222222222222",
29                 region:"left"
30             });
31             var con3 = new dijit.layout.ContentPane({
32                 content:"333333333333333333333",
33                 region:"center"
34             });
35             var con4 = new dijit.layout.ContentPane({
36                 content:"444444444444444444444",
37                 region:"right"
38             });
39             var con5 = new dijit.layout.ContentPane({
40                 content:"5555555555555555555555",
41                 region:"bottom"
42             });
43             
44             bor.addChild(con1);
45             bor.addChild(con2);
46             bor.addChild(con3);
47             bor.addChild(con4);
48             bor.addChild(con5);
49             bor.startup();
50         });
51     </script>
52     
53     <!-- region 区域范围 -->
54 <!--     <div style="width: 535px; height: 290px">
55     <div dojoType="dijit.layout.BorderContainer" style="width: 100%; 
56 height: 100%;">
57         <div dojoType="dijit.layout.ContentPane" region="top" splitter="true">
58             This is the content in the top section.
59         </div>
60         <div dojoType="dijit.layout.ContentPane" region="left" style="width: 100px;" 
61 splitter="true">
62             This is the content in the left section.
63         </div>
64         <div dojoType="dijit.layout.ContentPane" region="center" splitter="true">
65             This is the content in the center section.
66         </div>
67         <div dojoType="dijit.layout.ContentPane" region="right" style="width: 100px;" 
68 splitter="true">
69             This is the content in the right section.
70         </div>
71         <div dojoType="dijit.layout.ContentPane" region="bottom" splitter="true">
72              This is the content in the bottom section.
73          </div>
74      </div> -->
75      
76      <div id="bor"></div>
77      
78 </body>
79 </html>

posted on 2017-01-13 10:33 Sharpest 阅读(303) 评论(0) 收藏举报