Dojo学习笔记(九):Dojo布局――对齐方式容器

前端之家收集整理的这篇文章主要介绍了Dojo学习笔记(九):Dojo布局――对齐方式容器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

用以盛放小部件,可以设置这些小部件的排列方式。

1dijit/layout/BorderContainer

BorderContainer是一个布局容器,,它将容器内容分为 5 个区域:左 (left/leading),右 (right/trailing),上 (top),下 (bottom),中 (Center),如下图所示。

wKiom1Q_qK3z86mjAABmV9qOuMA814.jpg


BorderContainer有两种不同的方式安排子元素的位置,通过design属性来控制,该属性的值可以是headline(默认值)或sidebar。选用 headline 布局方式时,上下区域与 BorderContainer 同宽。选用sidebar布局方式时,左右区域与BorderContainer同高。

<!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/BorderContainer","dijit/layout/ContentPane","dojo/parser","dojo/domReady!"]);
</script>
<title>BorderContainer学习</title>
</head>
<bodyclass="soria">
<divdojoType="dijit.layout.BorderContainer"design="sidebar"gutters="true"
liveSplitters="true"id="borderContainer"style="width:400px;height:300px;">
<divdojoType="dijit.layout.ContentPane"splitter="true"region="leading"style="width:100px;">
LeadingRegion
</div>
<divdojoType="dijit.layout.ContentPane"splitter="true"region="trailing"style="width:100px;">
TailingRegion
</div>
<divdojoType="dijit.layout.ContentPane"splitter="true"region="center">
CenterRegion
</div>
<divdojoType="dijit.layout.ContentPane"splitter="true"liveSplitters="true"region="top">
TopRegion
</div>
<divdojoType="dijit.layout.ContentPane"splitter="true"region="bottom">
BottomRegion
</div>
</div>
</body>
</html>

1.1 liveSpliter属性:Boolean

属性定义了当用户拖动区域边界时,容器内区域大小是随着鼠标的移动改变 (liveSpliter = true,默认值),还是只有到鼠标松开时,才执行容器内区域大小的修改 (liveSpliter = false)。


1.2 gutters属性:Boolean

属性定义了 BorderContainer 是否具有边界和留白,true(默认值)表示具有,false表示没有。


1.3 spliter属性:Boolean 与 region属性:String

这两个属性是为嵌套在 BorderContainer 内部的区域定义的。region 定义内部区域位置 (top,bottom,left,right,leading,trailing,center),spliter 定义是否可以通过拖动区域边界修改区域大小。


2dijit/layout/LayoutContainer

通过设置 layoutAlign="left"的属性来定义每个对象的具体位置;可以重复使用 layoutAlign = "left",这样的结果根据声明的先后顺序从左至右,从上至下的进行排列。这种布局方式比较简单,不需要考虑每个待布局对象的具体位置,只需要考虑对象之间的相对位置就可以了,比较适合于对整个页面进行布局。

<!DOCTYPEHTML>
<html>
<head>
<Metacharset="UTF-8">
<linkrel="stylesheet"href="dijit/themes/soria/soria.css">
<styletype="text/css">
html,body{
width:100%;
height:100%;
margin:0;
overflow:hidden;
}
#layoutContainer{
width:100%;
height:100%;
}
</style>
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script>
<scripttype="text/javascript">
require(["dijit/layout/LayoutContainer","dojo/domReady!"]);
</script>
<title>LayoutContainer学习</title>
</head>
<bodyclass="soria">
<divdata-dojo-type="dijit/layout/LayoutContainer"data-dojo-props="design:'sidebar'"id="layoutContainer">
<divdata-dojo-type="dijit/layout/ContentPane"data-dojo-props="region:'leading'"style="background-color:#00eeff;">Hi,I'mleadingpane</div>
<divdata-dojo-type="dijit/layout/ContentPane"data-dojo-props="region:'center'"style="background-color:#FFF0B4;">Hi,I'mcenterpane</div>
</div>
</body>
</html>

输出

wKioL1RAgSLBfv9iAACRgatjuzs982.jpg


备注:Dojo不推荐使用dijit/layout/LayoutContainer和dijit/layout/SplitContainer,从1.1及以后版本采用BorderContainer代替。

猜你在找的Dojo相关文章