Dojo学习笔记（十）：Dojo布局——堆叠容器

    可以把小部件层叠在一起，而一次只显示一个屏面。

1 dijit.layout.AccordionContainer

    AccordionContainer 顾名思义是像手风琴一样可以收缩的面板，这种方式比较适合单个portal的布局，小巧易用；也可以用于整个页面的布局。

AccordionContainer申明方式样例：

    "UTF-8" >
    "stylesheet"  href= "dijit/themes/soria/soria.css" >
    "text/javascript"  src= "dojo/dojo.js"  djConfig= "parseOnLoad:true" >
    "text/javascript" >
        require([ "dojo/parser" ,  "dijit/layout/AccordionContainer" ,  "dijit/layout/ContentPane" , "dojo/domReady!" ]);

    AccordionContainer学习

class = "soria" >
"width: 300px; height: 300px" >
    "dijit/layout/AccordionContainer"  style= "height: 300px;" >
        "dijit/layout/ContentPane"  title= "标题1" >
            标题 1 内容

        "dijit/layout/ContentPane"  title= "标题2"  selected= "true" >
            标题 2 内容

        "dijit/layout/ContentPane"  title= "标题3" >
            标题 3 内容测试

AccordionContainer编程方式样例：

    "UTF-8" >
    "stylesheet"  href= "dijit/themes/soria/soria.css" >
    "text/javascript"  src= "dojo/dojo.js"  djConfig= "parseOnLoad:true" >
    "text/javascript" >
        require([ "dijit/layout/AccordionContainer" ,  "dijit/layout/ContentPane" ,  "dojo/domReady!" ],
                function  (AccordionContainer, ContentPane) {
                    var  aContainer =  new  AccordionContainer({style:  "height: 300px" },  "myAccordionContainer" );
                    aContainer.addChild( new  ContentPane({
                        title:  "标题1" ,
                        content:  "标题1内容"
                    }));
                    aContainer.addChild( new  ContentPane({
                        title:  "标题2" ,
                        content:  "标题2内容" ,
                        selected: true
                    }));
                    aContainer.addChild( new  ContentPane({
                        title:  "标题3" ,
                        content:  "标题3内容测试"
                    }));
                    aContainer.startup();
                });

    AccordionContainer学习

class = "soria" >
"myAccordionContainer"  style= "width: 300px; height: 300px" >

输出：

2 dijit.layout.TabContainer

    TabContainer的导航按钮在顶端一字排开，而AccordionContainer的导航按钮在面板内显示。

TabContainer申明方式样例：

    "UTF-8" >
    "stylesheet"  href= "dijit/themes/soria/soria.css" >
    "text/javascript"  src= "dojo/dojo.js"  djConfig= "parseOnLoad:true" >
    "text/javascript" >
        require([ "dojo/parser" ,  "dijit/layout/TabContainer" ,  "dijit/layout/ContentPane" ]);

    TabContainer学习

class = "soria" >
"width: 350px; height: 300px" >
    "dijit/layout/TabContainer"  style= "width: 100%; height: 100%;" >
        "dijit/layout/ContentPane"  title= "My first tab"  data-dojo-props= "selected:true" >
            Lorem ipsum and all around...

        "dijit/layout/ContentPane"  title= "My second tab" >
            Lorem ipsum and all around - second...

        "dijit/layout/ContentPane"  title= "My last tab"  data-dojo-props= "closable:true" >
            Lorem ipsum and all around - last...

TabContainer编程方式样例：

    "UTF-8" >
    "stylesheet"  href= "dijit/themes/soria/soria.css" >
    "text/javascript"  src= "dojo/dojo.js"  djConfig= "parseOnLoad:true" >
    "text/javascript" >
        require([ "dijit/layout/TabContainer" ,  "dijit/layout/ContentPane" ,  "dojo/domReady!" ],  function (TabContainer, ContentPane){
            var  tc =  new  TabContainer({
                style:  "height: 100%; width: 100%;"
            },  "myTabContainer" );
            var  cp1 =  new  ContentPane({
                title:  "My first tab" ,
                content:  "Lorem ipsum and all around.."
            });
            tc.addChild(cp1);
            var  cp2 =  new  ContentPane({
                title:  "My second tab" ,
                content:  " Lorem ipsum and all around - second..."
            });
            tc.addChild(cp2);

            var  cp3 =  new  ContentPane({
                title:  "My third tab" ,
                content:  " Lorem ipsum and all around - third..." ,
                closable: true
            });
            tc.addChild(cp3);
            tc.startup();
        });

    TabContainer学习

class = "soria" >
"width: 350px; height: 300px" >
    "width: 350px; height: 290px" >
        "myTabContainer" >

输出：

2.1 tabPosition属性：String

    决定导航按钮相对于内容面板的位置，可取值："top", "bottom", "left-h", "right-h"。

2.2 doLayout属性：Boolean

    默认值为true，表示TabContainer高度与内容面板最大高度一致，为false表示TabContainer高度与当前内容面板高度一致。

    TabContainer可伸缩高度样例：

    "UTF-8" >
    "stylesheet"  href= "dijit/themes/soria/soria.css" >
    "text/javascript"  src= "dojo/dojo.js"  djConfig= "parseOnLoad:true" >
    "text/javascript" >
        require([ "dojo/parser" ,  "dijit/layout/TabContainer" ,  "dijit/layout/ContentPane" ]);

    TabContainer学习

class = "soria" >
"width: 600px;" >
    "dijit/layout/TabContainer"  style= "width: 100%;"  doLayout= "false" >
        "dijit/layout/ContentPane"  title= "My first tab"  data-dojo-props= "selected:true" >
            Lorem ipsum and all around...

        "dijit/layout/ContentPane"  title= "My second tab"  data-dojo-props= "closable:true" >
            Lorem ipsum and all around - second...
            Hmmm expanding tabs......

        "dijit/layout/ContentPane"  title= "My last tab" >
            Lorem ipsum and all around - last...


            Hmmm even more expanding tabs......

2.3  selected属性：Boolean

    设置当前激活的Tab，与selectChild()方法类似。

    备注：dijit.layout.AccordionContainer和dijit.layout.TabContainer都继承dijit/layout/StackController，具有dijit/layout/StackController中dijit/layout/StackContainer.ChildWidgetProperties 属性的值。

     本文转自stock0991 51CTO博客，原文链接：http://blog.51cto.com/qing0991/1565106，如需转载请自行联系原作者