Макет Dojo - две панели внутри панели - PullRequest
Новая
       16

Макет Dojo - две панели внутри панели

0 голосов
/ 07 декабря 2011

Я только начал изучать додзё для упражнения по оценке (мы можем использовать его на работе). Временные рамки на проекте, вероятно, не позволят мне изучить это с нуля, поэтому я прыгаю в глубокий конец. Мне было интересно, если кто-нибудь может указать мне в правильном направлении;

Приведенный ниже код представляет страницу из их учебника;

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>

1 Ответ

1 голос
/ 07 декабря 2011

Вы можете вложить второй borderContainer в вашу центральную область содержимого (вместо tabcontainer), с дизайном = заголовок. Затем вы можете поместить ContentPane в верхнюю часть внутреннего bordercontainer, а tabcontainer - в центральную часть того же самого.

Этот удивительный инструмент может помочь вам создать правильный макет: http://maqetta.org:55556/maqetta/

Просто создайте новую HTML-страницу и посмотрите на раздел «Контейнеры Dojo» на левой панели ...

Итак, ваш пример должен быть: 

<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>

...