第二部分： Dijit 3.3 布局容器

最新推荐文章于 2025-08-08 22:01:10 发布

翻译最新推荐文章于 2025-08-08 22:01:10 发布 · 2.4k 阅读

文章标签：

#div #float #delphi #dojo #java #api

Dojo 专栏收录该内容

25 篇文章

订阅专栏

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