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