第二部分： 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