可以把小部件层叠在一起，而一次只显示一个屏面。
1 dijit.layout.AccordionContainer
AccordionContainer 顾名思义是像手风琴一样可以收缩的面板，这种方式比较适合单个portal的布局，小巧易用；也可以用于整个页面的布局。
AccordionContainer申明方式样例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset=
"UTF-8"
>
<link rel=
"stylesheet"
href=
"dijit/themes/soria/soria.css"
>
<script type=
"text/javascript"
src=
"dojo/dojo.js"
djConfig=
"parseOnLoad:true"
></script>
<script type=
"text/javascript"
>
require([
"dojo/parser"
,
"dijit/layout/AccordionContainer"
,
"dijit/layout/ContentPane"
,
"dojo/domReady!"
]);
</script>
<title>AccordionContainer学习</title>
</head>
<body
class
=
"soria"
>
<div style=
"width: 300px; height: 300px"
>
<div data-dojo-type=
"dijit/layout/AccordionContainer"
style=
"height: 300px;"
>
<div data-dojo-type=
"dijit/layout/ContentPane"
title=
"标题1"
>
标题
1
内容
</div>
<div data-dojo-type=
"dijit/layout/ContentPane"
title=
"标题2"
selected=
"true"
>
标题
2
内容
</div>
<div data-dojo-type=
"dijit/layout/ContentPane"
title=
"标题3"
>
<b>标题
3
内容</b>测试
</div>
</div>
</div>
</body>
</html>
|
AccordionContainer编程方式样例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset=
"UTF-8"
>
<link rel=
"stylesheet"
href=
"dijit/themes/soria/soria.css"
>
<script type=
"text/javascript"
src=
"dojo/dojo.js"
djConfig=
"parseOnLoad:true"
></script>
<script type=
"text/javascript"
>
require([
"dijit/layout/AccordionContainer"
,
"dijit/layout/ContentPane"
,
"dojo/domReady!"
],
function
(AccordionContainer, ContentPane) {
var
aContainer =
new
AccordionContainer({style:
"height: 300px"
},
"myAccordionContainer"
);
aContainer.addChild(
new
ContentPane({
title:
"标题1"
,
content:
"标题1内容"
}));
aContainer.addChild(
new
ContentPane({
title:
"标题2"
,
content:
"标题2内容"
,
selected:
true
}));
aContainer.addChild(
new
ContentPane({
title:
"标题3"
,
content:
"<b>标题3内容</b>测试"
}));
aContainer.startup();
});
</script>
<title>AccordionContainer学习</title>
</head>
<body
class
=
"soria"
>
<div id=
"myAccordionContainer"
style=
"width: 300px; height: 300px"
></div>
</body>
</html>
|
输出：
2 dijit.layout.TabContainer
TabContainer的导航按钮在顶端一字排开，而AccordionContainer的导航按钮在面板内显示。
TabContainer申明方式样例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset=
"UTF-8"
>
<link rel=
"stylesheet"
href=
"dijit/themes/soria/soria.css"
>
<script type=
"text/javascript"
src=
"dojo/dojo.js"
djConfig=
"parseOnLoad:true"
></script>
<script type=
"text/javascript"
>
require([
"dojo/parser"
,
"dijit/layout/TabContainer"
,
"dijit/layout/ContentPane"
]);
</script>
<title>TabContainer学习</title>
</head>
<body
class
=
"soria"
>
<div style=
"width: 350px; height: 300px"
>
<div data-dojo-type=
"dijit/layout/TabContainer"
style=
"width: 100%; height: 100%;"
>
<div data-dojo-type=
"dijit/layout/ContentPane"
title=
"My first tab"
data-dojo-props=
"selected:true"
>
Lorem ipsum and all around...
</div>
<div data-dojo-type=
"dijit/layout/ContentPane"
title=
"My second tab"
>
Lorem ipsum and all around - second...
</div>
<div data-dojo-type=
"dijit/layout/ContentPane"
title=
"My last tab"
data-dojo-props=
"closable:true"
>
Lorem ipsum and all around - last...
</div>
</div>
</div>
</body>
</html>
|
TabContainer编程方式样例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset=
"UTF-8"
>
<link rel=
"stylesheet"
href=
"dijit/themes/soria/soria.css"
>
<script type=
"text/javascript"
src=
"dojo/dojo.js"
djConfig=
"parseOnLoad:true"
></script>
<script type=
"text/javascript"
>
require([
"dijit/layout/TabContainer"
,
"dijit/layout/ContentPane"
,
"dojo/domReady!"
],
function
(TabContainer, ContentPane){
var
tc =
new
TabContainer({
style:
"height: 100%; width: 100%;"
},
"myTabContainer"
);
var
cp1 =
new
ContentPane({
title:
"My first tab"
,
content:
"Lorem ipsum and all around.."
});
tc.addChild(cp1);
var
cp2 =
new
ContentPane({
title:
"My second tab"
,
content:
" Lorem ipsum and all around - second..."
});
tc.addChild(cp2);
var
cp3 =
new
ContentPane({
title:
"My third tab"
,
content:
" Lorem ipsum and all around - third..."
,
closable:
true
});
tc.addChild(cp3);
tc.startup();
});
</script>
<title>TabContainer学习</title>
</head>
<body
class
=
"soria"
>
<div style=
"width: 350px; height: 300px"
>
<div style=
"width: 350px; height: 290px"
>
<div id=
"myTabContainer"
></div>
</div>
</div>
</body>
</html>
|
输出：
2.1 tabPosition属性：String
决定导航按钮相对于内容面板的位置，可取值："top", "bottom", "left-h", "right-h"。
2.2 doLayout属性：Boolean
默认值为true，表示TabContainer高度与内容面板最大高度一致，为false表示TabContainer高度与当前内容面板高度一致。
TabContainer可伸缩高度样例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset=
"UTF-8"
>
<link rel=
"stylesheet"
href=
"dijit/themes/soria/soria.css"
>
<script type=
"text/javascript"
src=
"dojo/dojo.js"
djConfig=
"parseOnLoad:true"
></script>
<script type=
"text/javascript"
>
require([
"dojo/parser"
,
"dijit/layout/TabContainer"
,
"dijit/layout/ContentPane"
]);
</script>
<title>TabContainer学习</title>
</head>
<body
class
=
"soria"
>
<div style=
"width: 600px;"
>
<div data-dojo-type=
"dijit/layout/TabContainer"
style=
"width: 100%;"
doLayout=
"false"
>
<div data-dojo-type=
"dijit/layout/ContentPane"
title=
"My first tab"
data-dojo-props=
"selected:true"
>
Lorem ipsum and all around...
</div>
<div data-dojo-type=
"dijit/layout/ContentPane"
title=
"My second tab"
data-dojo-props=
"closable:true"
>
Lorem ipsum and all around - second...<br />
Hmmm expanding tabs......
</div>
<div data-dojo-type=
"dijit/layout/ContentPane"
title=
"My last tab"
>
Lorem ipsum and all around - last...<br />
<br />
<br />
Hmmm even more expanding tabs......
</div>
</div>
</div>
</body>
</html>
|
2.3 selected属性：Boolean
设置当前激活的Tab，与selectChild()方法类似。
备注：dijit.layout.AccordionContainer和dijit.layout.TabContainer都继承dijit/layout/StackController，具有dijit/layout/StackController中dijit/layout/StackContainer.ChildWidgetProperties 属性的值。
本文转自stock0991 51CTO博客，原文链接：http://blog.51cto.com/qing0991/1565106，如需转载请自行联系原作者
