• dojo研究

    Tag:

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://gfish.blogbus.com/logs/3415496.html

    1.1  dojo.widget.LayoutContainer

     

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

     

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

    LayoutContainer的重要属性:

     

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

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

    n         top-bottom  上下布局优先,以layoutAlign=toplayoutAlign=bottom属性的子组件为优先,即先对具有这些属性的子组件进行布局,其次再到具有leftright属性的子组件布局

    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,用idwidgetId来标识

    l         labelPosition TAB标签的位置,可以取值topbottom,当取值leftright的时候,显示有点怪异!

     

    重要的方法:

     

    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

    还有:onShowonHide方法,这些方法在showhide之后被调用,你可以通过dojoevent系统,编写自己的方法,来连接到这些方法上,以便提供更多额外的处理。

     

    或者直接将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()>


    收藏到:Del.icio.us