可以把小部件层叠在一起，而一次只显示一个屏面。
1dijit.layout.AccordionContainer
AccordionContainer 顾名思义是像手风琴一样可以收缩的面板，这种方式比较适合单个portal的布局，小巧易用；也可以用于整个页面的布局。
AccordionContainer申明方式样例：
<!DOCTYPEHTML> <html> <head> <Metacharset="UTF-8"> <linkrel="stylesheet"href="dijit/themes/soria/soria.css"> <scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script> <scripttype="text/javascript"> require(["dojo/parser","dijit/layout/AccordionContainer","dijit/layout/ContentPane","dojo/domReady!"]); </script> <title>AccordionContainer学习</title> </head> <bodyclass="soria"> <divstyle="width:300px;height:300px"> <divdata-dojo-type="dijit/layout/AccordionContainer"style="height:300px;"> <divdata-dojo-type="dijit/layout/ContentPane"title="标题1"> 标题1内容 </div> <divdata-dojo-type="dijit/layout/ContentPane"title="标题2"selected="true"> 标题2内容 </div> <divdata-dojo-type="dijit/layout/ContentPane"title="标题3"> <b>标题3内容</b>测试 </div> </div> </div> </body> </html>
AccordionContainer编程方式样例：
<!DOCTYPEHTML> <html> <head> <Metacharset="UTF-8"> <linkrel="stylesheet"href="dijit/themes/soria/soria.css"> <scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script> <scripttype="text/javascript"> require(["dijit/layout/AccordionContainer","dojo/domReady!"],function(AccordionContainer,ContentPane){ varaContainer=newAccordionContainer({style:"height:300px"},"myAccordionContainer"); aContainer.addChild(newContentPane({ title:"标题1",content:"标题1内容" })); aContainer.addChild(newContentPane({ title:"标题2",content:"标题2内容",selected:true })); aContainer.addChild(newContentPane({ title:"标题3",content:"<b>标题3内容</b>测试" })); aContainer.startup(); }); </script> <title>AccordionContainer学习</title> </head> <bodyclass="soria"> <divid="myAccordionContainer"style="width:300px;height:300px"></div> </body> </html>
输出：
2dijit.layout.TabContainer
TabContainer的导航按钮在顶端一字排开，而AccordionContainer的导航按钮在面板内显示。
TabContainer申明方式样例：
<!DOCTYPEHTML> <html> <head> <Metacharset="UTF-8"> <linkrel="stylesheet"href="dijit/themes/soria/soria.css"> <scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script> <scripttype="text/javascript"> require(["dojo/parser","dijit/layout/TabContainer","dijit/layout/ContentPane"]); </script> <title>TabContainer学习</title> </head> <bodyclass="soria"> <divstyle="width:350px;height:300px"> <divdata-dojo-type="dijit/layout/TabContainer"style="width:100%;height:100%;"> <divdata-dojo-type="dijit/layout/ContentPane"title="Myfirsttab"data-dojo-props="selected:true"> Loremipsumandallaround... </div> <divdata-dojo-type="dijit/layout/ContentPane"title="Mysecondtab"> Loremipsumandallaround-second... </div> <divdata-dojo-type="dijit/layout/ContentPane"title="Mylasttab"data-dojo-props="closable:true"> Loremipsumandallaround-last... </div> </div> </div> </body> </html>
TabContainer编程方式样例：
<!DOCTYPEHTML> <html> <head> <Metacharset="UTF-8"> <linkrel="stylesheet"href="dijit/themes/soria/soria.css"> <scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script> <scripttype="text/javascript"> require(["dijit/layout/TabContainer",function(TabContainer,ContentPane){ vartc=newTabContainer({ style:"height:100%;width:100%;" },"myTabContainer"); varcp1=newContentPane({ title:"Myfirsttab",content:"Loremipsumandallaround.." }); tc.addChild(cp1); varcp2=newContentPane({ title:"Mysecondtab",content:"Loremipsumandallaround-second..." }); tc.addChild(cp2); varcp3=newContentPane({ title:"Mythirdtab",content:"Loremipsumandallaround-third...",closable:true }); tc.addChild(cp3); tc.startup(); }); </script> <title>TabContainer学习</title> </head> <bodyclass="soria"> <divstyle="width:350px;height:300px"> <divstyle="width:350px;height:290px"> <divid="myTabContainer"></div> </div> </div> </body> </html>
输出：
2.1tabPosition属性：String
决定导航按钮相对于内容面板的位置，可取值："top","bottom","left-h","right-h"。
2.2doLayout属性：Boolean
默认值为true，表示TabContainer高度与内容面板最大高度一致，为false表示TabContainer高度与当前内容面板高度一致。
TabContainer可伸缩高度样例：
<!DOCTYPEHTML> <html> <head> <Metacharset="UTF-8"> <linkrel="stylesheet"href="dijit/themes/soria/soria.css"> <scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script> <scripttype="text/javascript"> require(["dojo/parser","dijit/layout/ContentPane"]); </script> <title>TabContainer学习</title> </head> <bodyclass="soria"> <divstyle="width:600px;"> <divdata-dojo-type="dijit/layout/TabContainer"style="width:100%;"doLayout="false"> <divdata-dojo-type="dijit/layout/ContentPane"title="Myfirsttab"data-dojo-props="selected:true"> Loremipsumandallaround... </div> <divdata-dojo-type="dijit/layout/ContentPane"title="Mysecondtab"data-dojo-props="closable:true"> Loremipsumandallaround-second...<br/> Hmmmexpandingtabs...... </div> <divdata-dojo-type="dijit/layout/ContentPane"title="Mylasttab"> Loremipsumandallaround-last...<br/> <br/> <br/> Hmmmevenmoreexpandingtabs...... </div> </div> </div> </body> </html>
2.3selected属性：Boolean
设置当前激活的Tab，与selectChild()方法类似。
备注：dijit.layout.AccordionContainer和dijit.layout.TabContainer都继承dijit/layout/StackController，具有dijit/layout/StackController中dijit/layout/StackContainer.ChildWidgetProperties 属性的值。
原文链接：https://www.f2er.com/dojo/291116.html