分类导航

Dojo 发布时间：2022-04-21 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Dojo学习笔记（十）：Dojo布局――堆叠容器，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

1dijit.layout.AccordionContainer@H_675_6@

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@H_675_6@

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@H_675_6@

决定导航按钮相对于内容面板的位置，可取值："top","bottom","left-h","right-h"。

2.2doLayout属性：Boolean@H_675_6@

默认值为true，表示TabContainer高度与@H_675_6@内容面板最大高度一致，为false表示TabContainer高度与当前@H_675_6@内容面板高度一致。

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@H_675_6@

设置当前激活的Tab，与SELEctChild()方法类似。@H_675_6@

备注：dijit.layout.AccordionContainer和dijit.layout.TabContainer都继承dijit/layout/StackController，具有dijit/layout/StackController中dijit/layout/StackContainer.ChildWidgetProperties 属性的值。@H_675_6@@H_675_6@