Dojo学习笔记(十):Dojo布局――堆叠容器

前端之家收集整理的这篇文章主要介绍了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>

输出

wKiom1RAiNSQJkYzAACxJIJSlRM281.jpg

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>

输出

wKiom1RAje_xrkhmAACw-COU9H4781.jpg

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相关文章