Dojo开发之布局容器和堆叠容器使用
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Dojo开发之布局容器和堆叠容器使用,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2766字,纯文字阅读大概需要4分钟。
内容图文
本篇博客我们来学习一下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、显示效果如下图所示:
以上就是 Dojo开发之布局容器和堆叠容器使用的内容,更多相关内容请关注PHP中文网(www.gxlcms.com)!
内容总结
以上是互联网集市为您收集整理的Dojo开发之布局容器和堆叠容器使用全部内容,希望文章能够帮你解决Dojo开发之布局容器和堆叠容器使用所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。