Макет додзё не работает - PullRequest
Новая
       29

Макет додзё не работает

2 голосов
/ 25 января 2012

Может кто-нибудь опубликовать рабочий пример макета додзё.У меня есть приведенный ниже html-файл, Layout вообще не отображается, у меня есть все файлы, связанные с dojo, в корне веб-приложения. [Я даже пытался использовать google CDN, но без помощи] содержимое страницы отображается без Layout.Я скопировал вставленный пример, доступный в Интернете, но безуспешно.Буду признателен за вашу помощь.Заранее спасибо. 

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Layout with Dijit</title>
<style type="text/css">
@import "dojoroot/dijit/themes/tundra/tundra.css";

@import "dojoroot/dojo/resources/dojo.css";

@import "dojoroot/dijit/themes/tundra/claro.css";
</style>
<script type="text/javascript" src="dojoroot/dojo/dojo.js"
    data-dojo-config="parseOnLoad: false ,  isDebug: true"></script>

<script>
    dojo.require("dojo.parser");
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.TabContainer");
    dojo.require("dijit.layout.ContentPane");
</script>

</head>

<body class="claro">
    <div id="appLayout" class="demoLayout"
        data-dojo-type="dijit.layout.BorderContainer"
        data-dojo-props="design: 'headline'">
        <div class="centerPanel" data-dojo-type="dijit.layout.ContentPane"
            data-dojo-props="region: 'center'">
            <div>
                <h4>Group 1 Content</h4>
                <p>para 1</p>
            </div>
            <div>
                <h4>h4 para 2</h4>
            </div>
            <div>
                <h4>h4 para 3</h4>
            </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>
</body>
</html>

Ответы [ 2 ]

4 голосов
/ 25 января 2012

Вы должны убедиться, что у вас есть dojo, который анализирует ваш документ (см. Комментарий Фроде).

Кроме того, вам может потребоваться указать ваше тело в виде явной ширины и высоты (в противном случае iirc, IE свернет его).

1 голос
/ 26 января 2012 
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Layout with Dijit</title>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" > 

<style type="text/css">
html, body { 
    height: 100%; 
    margin: 0; 
    overflow: hidden; 
    padding: 0; 
} 

#appLayout { 
    height: 100%; 
} 
#leftCol { 
    width: 14em; 
}
</style>

 <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"     
    data-dojo-config="parseOnLoad: true">
    </script>  

<script>
    dojo.require("dojo.parser");
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.TabContainer");
    dojo.require("dijit.layout.ContentPane");
</script>

</head>

<body class="claro">
    <div id="appLayout" class="demoLayout"
        data-dojo-type="dijit.layout.BorderContainer"
        data-dojo-props="design: 'headline'">
        <div class="centerPanel" data-dojo-type="dijit.layout.ContentPane"
            data-dojo-props="region: 'center'">
            <div>
                <h4>Group 1 Content</h4>
                <p>para 1</p>
            </div>
            <div>
                <h4>h4 para 2</h4>
            </div>
            <div>
                <h4>h4 para 3</h4>
            </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>
</body>
</html>

код, приведенный выше. Спасибо всем, кто помог.

...