可以把小部件层叠在一起，而一次只显示一个屏面。 1dijit.layout.AccordionContainer AccordionContainer 顾名思义是像手风琴一样可以收缩的面板，这种方式比较适合单个portal的布局，小巧易用；
可以把小部件层叠在一起，而一次只显示一个屏面。
1 dijit.layout.AccordionContainer
AccordionContainer 顾名思义是像手风琴一样可以收缩的面板，这种方式比较适合单个portal的布局，小巧易用；也可以用于整个页面的布局。
AccordionContainer申明方式样例：
<!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编程方式样例：
<!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>
输出：
650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/1956193112-2.png" title="快照3.jpg" alt="wKiom1RAiNSQJkYzAACxJIJSlRM281.jpg" d="3714148" s="dfc_00d" t="jpg">
2 dijit.layout.TabContainer
TabContainer的导航按钮在顶端一字排开，而AccordionContainer的导航按钮在面板内显示。
TabContainer申明方式样例：
<!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编程方式样例：
<!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>
输出：
650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/1956193112-2.png" title="快照4.jpg" alt="wKiom1RAje_xrkhmAACw-COU9H4781.jpg" d="3714149" s="6ac_8bb" t="jpg">
2.1 tabPosition属性：String
决定导航按钮相对于内容面板的位置，可取值："top", "bottom", "left-h", "right-h"。
2.2 doLayout属性：Boolean
默认值为true，表示TabContainer高度与内容面板最大高度一致，为false表示TabContainer高度与当前内容面板高度一致。
TabContainer可伸缩高度样例：
<!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 属性的值。