dojo.widget.LayoutContainer 使用方法

dojo.widget.LayoutContainer


dojo的布局通过LayoutContainer组件来进行管理，而且，在LayoutContainer容器里面的组件，必须具有layoutAlign属性（这个属性决定了这些组件的位置）！



LayoutContainer组件无法决定其包含的子组件的位置，只有子组件本身才能通过layoutAlign属性来定位自身。

LayoutContainer的重要属性：



l         layoutChildPriority：表示在布局容器所包含的组件的时候，其优先顺序如何，有三个取值：none/top-bottom/left-right。

n         none – 表示无优先顺序，其布局取决于子组件在HTML出现的先后顺序而决定。

n         top-bottom – 上下布局优先，以layoutAlign=”top”和layoutAlign=”bottom”属性的子组件为优先，即先对具有这些属性的子组件进行布局，其次再到具有”left”和”right”属性的子组件布局

n         left-right – 左右布局优先，与top-bottom刚好相反。

LayoutContainer当然也可以嵌套使用，但需要注意添加layoutAlign属性（被别的LayoutContainer包含的时候，需要这个属性来定位）

1.2  dojo.widget.SplitContainer


此容器也是用于布局，但功能与LayoutContainer不同的是，SplitContainer所布局分离出来的区块，可以通过显示边界来拖动，以便动态改变每个区域的大小。



重要的属性：



l         orientation － 标识分隔的方向，默认取值是：horizontal，表示是水平方向分隔，取任何其它值都表示垂直分隔（但一般明确的标识垂直分隔的值是：vertical）

l         sizerWidth – 分隔线的宽度，默认取值是15

l         persist – 是否为本次会话保存当前调整的分隔位置。默认值为true。即如果当前会话不结束，那么客户端所调整的位置便一直有效！

l         activeSizing – 是否在调整位置的时候，内容跟着动态变化。0表示不会跟着动态变化，直到鼠标释放之后，里面的内容才开始调整；1则反之。



SplitContainer所包含的组件，可以设置下列属性：



l         sizeMin – 默认值为10，本组件在SplitContainer容器中可允许的最小宽度，即拖动缩小的时候，不能小于本值。

l         sizeShare – 默认值为10，这个值的意思是本组件在容器中所占的宽度，请注意，这是一个相对值。比如，父容器有两个子组件，如果这两个子组件的sizeShare均设置为1（或均设置为其它任意相等的两个数值），意味着每个组件各占据50％的宽度。注意，在SplitContainer容器中的组件，你不能通过style=”width:XXpx”这样的style代码来设置宽度，将不会起作用。



1.3  dojo.widget.TabContainer


TAB标签的容器，在这个容器下面的组件，将会被显示成Tab标签的样子。

重要的属性：



l         selectedTab – 指定哪个tab是初始化的时候被选中的tab，用id或widgetId来标识

l         labelPosition – TAB标签的位置，可以取值top或bottom，当取值left或right的时候，显示有点怪异！



重要的方法：



l         selectTab(tab,_noRefresh) －选择某个TAB





其它说明：



TAB容器一般会包含ContentPane组件，而且需要在子组件中指定label属性。作为TAB显示的label。

TAB容器所包含的子组件，如果它被选中，那么其selected属性为true，否则为false





1.4  dojo.widget.ContentPane
用来承载页面的内容。一般它会被加入到XXXContainer容器中。



下面是部分重要属性介绍：

l         href – 远程加载的内容

l         preload – 是否提前加载

l         refreshOnShow – 在显示的时候是否刷新内容，如果里面有javascript脚本，也会重新执行

l         executeScripts – 是否在加载的时候执行其中的javascript脚本



下面是部分重要方法介绍：

l         setUrl – 设置远程加载的内容，当调用这个方法后，内容便被即时覆盖了！



onLoad – url被加载的时候调用（好像不太好用）

onUnLoad -



ContentPane继承自HtmlWidget，因此也具有它的一些方法和属性：



templateCssPath/ templatePath等

还有：onShow和onHide方法，这些方法在show或hide之后被调用，你可以通过dojo的event系统，编写自己的方法，来连接到这些方法上，以便提供更多额外的处理。



或者直接将onShow这样的方法添加到标签属性中（在IE中有点问题，刷新的时候也有可能会调用到这个方法！！！！！！），如：

<div dojoType=”ContentPane” onShow=”showit()” …></div>

<script>

function showit(){

    alert(“showed”);

}
</script>

注意：在ContentPane中，如果调用setUrl方法来动态加载内容，而需要在这些被动态加载的内容中定义javascript函数的话，需要遵守下面的做法：

正确示例：

<script>

myfunction = function(){

    Dosomething…

}

</script>

<input type=”button” value=”click me” onclick=”myfunction()”>

以下的做法是错误的：

<script>

var myfunction = function(){

    Dosomething…

}

</script>
<input type=”button” value=”click me” onclick=”myfunction()”>

以下的做法也是错误的（一般的网页所使用的方法，在DOJO动态加载的内容中无法使用）：

<script>

function myfunction(){

    Dosomething…

}

</script>

<input type=”button” value=”click me” onclick=”myfunction()”>

评论

1 楼 cun2001 2007-07-27  

很不错，谢谢！Dojo的API内容讲的不太详细，希望能有更多关于此方面的文章