本篇博客我们来学习一下Dojo开发中常用到的布局容器BorderContainer和堆叠容器的使用。
1、BorderContainer
它是一个布局容器,主要分为5个区域,上下左右中。每个BorderContainer都有两种不同的方式布局,可以通过“design”属性来控制,分别为headline和sidebar,布局方式如下图所示:
2、堆叠容器
当页面中的内容比较多的时候,可以使用堆叠容器显示部分元素,主要有3种类型:
StackContainer最普通的一种,需要自己编写控制和代码。
AccordionContainer导航按钮在面板内显示。
TabContainer按钮在前端一字排开。
3、示例代码
dojo之BorderContainer和堆叠容器html, body
{
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
#borderContainer
{
width: 100%;
height: 100%;
}
dojoConfig = { parseOnLoad: true };
require(["dojo/parser", "dijit/layout/ContentPane", "dijit/layout/BorderContainer",
"dijit/layout/TabContainer", "dijit/layout/AccordionContainer", "dijit/layout/AccordionPane"]);
id="borderContainer">
style="background-color: grey">
合肥市防汛抗旱综合应用系统
style="width: 300px;" id="leftAccordion">
系统首页
实时视频
水利工程
style="background-color: red">
暖枫无敌2015 @版权所有 当前时间:2015年12月15日 星期二
4、显示效果如下图所示:
以上就是 Dojo开发之布局容器和堆叠容器使用的内容,更多相关内容请关注PHP中文网(www.php.cn)!
本文原创发布php中文网,转载请注明出处,感谢您的尊重!