Question

我刚刚开始学习dojo进行评估练习（我们可能会在工作中使用它）。项目的时间表可能不允许我从头开始学习这个，所以我跳得很深。我想知道是否有人能指出我正确的方向;

以下代码代表其教程中的页面;

http://dojotoolkit.org/documentation/tutorials/1.6/dijit_layout/demo/appLayout.html

^^它的意思是什么。

我有这个工作，但我希望两个面板位于中间部分：顶部是一个普通的内容面板，下面是一个标签面板。下面的代码表示我认为我可能会实现这一点。我发现如果我注释掉内容窗格（其中包含“Hello world”），那么它将“接管”其父内容窗格，并且甚至不再显示标签面板。取消注释，然后我回来了。

是否有人能够指出我如何做到这一点的好例子？

<div id="appLayout" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer"
    data-dojo-props="design: 'headline'">

    <div class = "centrePanel"
        data-dojo-type="dijit.layout.ContentPane"
        data-dojo-props="region: 'center'">

            <%-- I want to uncomment this bit!!
            <div 
                data-dojo-type="dijit.layout.ContentPane"
                data-dojo-props="region: 'top'">
                    Hello World                    
            </div>
            --%>

            <div 
                data-dojo-type="dijit.layout.TabContainer"
                data-dojo-props="region: 'center'">
                <asp:ContentPlaceHolder ID="MainContent" runat="server">
                </asp:ContentPlaceHolder>                    
            </div>                



    </div>        
    <div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top'">Header content (top)</div>
    <div id="leftCol" class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left', splitter: true">Sidebar content (left)</div>
</div>

Answer 1

您可以使用design =标题将第二个borderContainer嵌套在中心内容窗格（而不是tabcontainer）中。然后，您可以将ContentPane放在内部bordercontainer的顶部部分和tabcontainer的中间部分中。

这个神奇的工具可以帮助您生成正确的布局：http://maqetta.org:55556/maqetta/

只需创建一个新的HTML页面，然后查看左侧栏中的“Dojo Containers”部分......

所以你的例子应该是：

<div id="appLayout" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design: 'headline'">

<div class = "centrePanel"
    data-dojo-type="dijit.layout.ContentPane"
    data-dojo-props="region: 'center'">
        <div id="innerLayout" data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design: 'headline'">

            <div 
                data-dojo-type="dijit.layout.ContentPane"
                data-dojo-props="region: 'top'">
                    Hello World                    
            </div>


            <div 
                data-dojo-type="dijit.layout.TabContainer"
                data-dojo-props="region: 'center'">
                <asp:ContentPlaceHolder ID="MainContent" runat="server">
                </asp:ContentPlaceHolder>                    
            </div>                

    </div>

</div>        
<div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top'">Header content (top)</div>
<div id="leftCol" class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left', splitter: true">Sidebar content (left)</div>

Dojo布局 - 面板内的两个面板

1 个答案: