Dojo开发之布局容器和堆叠容器使用
来源:互联网 发布:ubuntu安装phpstorm 编辑:程序博客网 时间:2024/06/04 18:26
本篇博客我们来学习一下Dojo开发中常用到的布局容器BorderContainer和堆叠容器的使用。
1、BorderContainer
它是一个布局容器,主要分为5个区域,上下左右中。每个BorderContainer都有两种不同的方式布局,可以通过“design”属性来控制,分别为headline和sidebar,布局方式如下图所示:
2、堆叠容器
当页面中的内容比较多的时候,可以使用堆叠容器显示部分元素,主要有3种类型:
StackContainer最普通的一种,需要自己编写控制和代码。
AccordionContainer导航按钮在面板内显示。
TabContainer按钮在前端一字排开。
3、示例代码
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>dojo之BorderContainer和堆叠容器</title> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; } #borderContainer { width: 100%; height: 100%; } </style> <script type="text/javascript"> dojoConfig = { parseOnLoad: true }; </script> <link href="Scripts/dijit/themes/claro/claro.css" rel="stylesheet" /> <script type="text/javascript" src="Scripts/dojo/dojo.js"></script> <script type="text/javascript"> require(["dojo/parser", "dijit/layout/ContentPane", "dijit/layout/BorderContainer", "dijit/layout/TabContainer", "dijit/layout/AccordionContainer", "dijit/layout/AccordionPane"]); </script></head><body class="claro"> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:true,liveSplitters:false" id="borderContainer"> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top',splitter:false" style="background-color: grey"> 合肥市防汛抗旱综合应用系统 </div> <div data-dojo-type="dijit/layout/AccordionContainer" data-dojo-props="minSize:20,region:'right',splitter:true" style="width: 300px;" id="leftAccordion"> <div data-dojo-type="dijit/layout/AccordionPane" title="汛情概览"> </div> <div data-dojo-type="dijit/layout/AccordionPane" title="实时雨情"> </div> <div data-dojo-type="dijit/layout/AccordionPane" title="汛情预警" selected="true"> </div> <div data-dojo-type="dijit/layout/AccordionPane" title="实时水情"> </div> </div> <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'center',tabStrip:true"> <div data-dojo-type="dijit/layout/ContentPane" title="系统首页" selected="true"> 系统首页</div> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="closable:true" title="实时视频"> 实时视频</div> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="closable:true" title="水利工程"> 水利工程</div> </div> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="background-color: red"> 暖枫无敌2015 @版权所有 当前时间:2015年12月15日 星期二 </div> </div></body></html>
4、显示效果如下图所示:
===========================================================================
如果觉得对您有帮助,微信扫一扫支持一下:
1 0
- Dojo开发之布局容器和堆叠容器使用
- 使用dijit的堆叠容器StackContainer
- 布局和容器
- 布局和容器
- DirectUI容器布局之DialogLayout
- ExtJS 4 布局和容器
- 布局容器container 和流式布局容器container-fluid
- 容器布局
- 容器布局
- Flex之旅--Flex4容器和布局定位
- Flex之旅--Flex4容器和布局定位
- android之动画通过动画布局声明文件和关联文件为容器布局----布局动画
- PyGobject(十八)布局容器之ActionBar
- PyGobject(十九)布局容器之Alignment
- PyGobject(三十)布局容器之StackSidebar
- PyGobject(三十一)布局容器之EventBox
- PyGobject(三十二)布局容器之Window
- PyGobject(三十三)布局容器之ApplicationWindow
- 调频,调幅与调相
- OC学习_4_关于多态
- css布局模型
- 如何将多个源文件编译为一个.ko
- 点击子对象,不解触发父对象click事件
- Dojo开发之布局容器和堆叠容器使用
- javascript(二):DOM
- 如何设置UIScrollview上的UITableView滑动删除
- 豆瓣电影的爬虫示例
- 【黑马程序员】第六章:Java API
- jstl 的一些随笔
- HDU5599GTW likes tree
- KVO delegation与KVO的区别和优缺点
- android中的ViewTreeObserver