第二部分： Dijit 3.3 布局容器

Mon, 05/14/2007 - 18:10 — criecke

类似于Java AWT和Delphi的布局窗格，LayoutContainer 是一个可以指定大小的框（比如style="width: 500px; height: 500px;"）, 可以包含子部件（标有layoutAlign，取值为"left", "right", "bottom", "top", 以及 "client"）. LayoutContainer 对标有left/top/bottom/right的子部件延着框的边排列，然后把标有“client”的子部件放在剩下的空间中间位置。

Left/right位置类似月CSs的"float: left" 和 "float: right", top/bottom位置类似于 "float: top" 和"float: bottom"。

注意只能由一个client元素，但可以有其他多个left, right, top, 或者 bottom元素。

例子

布局容器很容易格式化表格的内容：




<script type="text/javascript">...


        dojo.require("dijit.layout.ContentPane");


        dojo.require("dijit.layout.LayoutContainer");


        dojo.require("dijit.util.parser");      // scan page for widgets and instantiate them


</script>


...


<div dojoType="dijit.layout.LayoutContainer" style="width: 100%; height: 100%">


   <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color:red">


        The Dojo Book


   </div>


   <div dojoType="dijit.layout.ContentPane" layoutAlign="left" 


        style="background-color:lightblue;width: 120px;">


        Table of Contents


    </div>


    <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="background-color:yellow">


        <blockquote><a href="../node/717">Introduction</a>


        <ol>


            <li><a href="../node/718">Dojo: What is It?</a></li>


            <li><a href="../node/719">History</a></li>


            <li><a href="../node/733">What Dojo Gives You</a></li>


...


    </div>


</div>

产生的效果:




layoutChildPriority属性能改变绘制的顺序：

如果值是 "top-bottom", 那么LayoutContainer 会先沿着“top”和“bottom”，然后沿着左右来放置元素（在上下元素之间）。client元素最后放置在剩下的空间内。

I如果值是 "left-right", 那么LayoutContainer 会先沿着左右，然后沿着上下方向来放置元素（在左右元素之间）。client元素最后放置在剩下的空间内。

如果值是"none", 就会把每个元素按自然顺序排列。基本上每个元素被放置在“剩余空间”中，剩余空间的大小初始的时候是内容区域的大小，然后随之每个子元素的添加而重新计算剩余的大小。

简单的改变子元素的优先级:


<div dojoType="dijit.layout.LayoutContainer" layoutChildPriority='left-right' 


       style="width: 100%; height: 100%">

改变了绘制的顺序和重叠

Dijit类型，属性，事件和方法

dijit.layout.LayoutContainer 在固定的方框中沿着边和中间放置元素.
属性
layoutChildPriority	top-bottom left-right none	top-bottom	See above

可访问性

Author: API Docs, Craig