Question

我正在尝试使用Dojo BorderContainer，并尝试将BorderContainer放到html主体中。似乎BorderContainer没有把东西放在正确的位置。

这是代码。基本上，这是Dojo Helloword教程，其中dojo代码替换为Dojo的BorderContainer示例。（该文件是本地html文件hello.html）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
</head>
<body>
    <h1 id="greeting">Hello</h1>
    <!-- load Dojo -->
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
            data-dojo-config="async: true"></script>

    <script>
        require([
            "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
            "dojo/domReady!"
        ], function(BorderContainer, ContentPane){
            // create a BorderContainer as the top widget in the hierarchy
            var bc = new BorderContainer({
                style: "height: 300px; width: 500px;"
            });

            // create a ContentPane as the left pane in the BorderContainer
            var cp1 = new ContentPane({
                region: "left",
                style: "width: 100px",
                content: "why am i here?"
            });
            bc.addChild(cp1);

            // create a ContentPane as the center pane in the BorderContainer
            var cp2 = new ContentPane({
                region: "center",
                content: "not happy."
            });
            bc.addChild(cp2);

            // put the top level widget into the document, and then call startup()
            bc.placeAt(document.body);
            bc.startup();
        });
    </script>
</body>
</html>

这就是我得到的：

Browser screen shot

请注意，应该在BorderContainer中的内容（＆＃34;为什么我在这里，不开心。＆＃34;）高于＆＃34; Hello＆＃34; h1标签。

我使用了Chrome的inspect元素功能。 BorderContainer放置正确，但ContentPane的位置属性由Dojo设置为绝对。

<div class="dijitContentPane dijitBorderContainer-child dijitBorderContainer-dijitContentPane dijitBorderContainerPane dijitAlignCenter" id="dijit_layout_ContentPane_1" widgetid="dijit_layout_ContentPane_1" style="left: 100px; top: 0px; position: absolute; width: 400px; height: 300px;">not happy.</div>

代码只是为Dojo网站复制粘贴，我想知道什么可能出错。有人可以帮忙吗？

Answer 1

你不包括dojo css文件（即claro.css），这很可能是为什么事情看起来不正确。

Dojo BorderContainer将其内容置于错误的位置

1 个答案: