Dojo学习笔记十：Dojo布局――堆叠容器

可以把小部件层叠在一起，而一次只显示一个屏面。

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 属性的值。

Dojo学习笔记十：Dojo布局――堆叠容器

相关文章