0

这是 dojo1.7布局的延续。

所以我制作了一些工作小部件并对其进行了测试，然后我尝试使用http://dojotoolkit.org/documentation/tutorials/1.7/dijit_layout/上的教程更改我的工作，以使布局更好。在以许多有趣的方式失败之后（这是我的最后一个问题），我开始了一条新的道路。我现在的计划是实现布局教程示例，然后插入我的小部件。出于某种原因，即使遵循本教程也行不通……一切加载然后消失，我只剩下一个空白的浏览器窗口。

有任何想法吗？

让我感到震惊的是，这可能是浏览器兼容性问题，我正在使用 Firefox 13.0.1。据我所知，Dojo 应该与此兼容...

无论如何，有一些代码：

HTML：

<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>stuff</p>
        </div>
        <div>
            <h4>Group 2 Content</h4>
        </div>
        <div>
            <h4>Group 3 Content</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>

道场配置：

var dojoConfig = {
        baseUrl: "${request.static_url('mega:static/js')}", //this is in a mako template
        tlmSiblingOfDojo: false,
        packages: [
            { name: "dojo", location: "libs/dojo" },
            { name: "dijit", location: "libs/dijit" },
            { name: "dojox", location: "libs/dojox" },
        ],
        parseOnLoad: true,
        has: {
                "dojo-firebug": true,
                "dojo-debug-messages": true
            },   
       async: true 
    };

其他 js 东西：

require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
    "dijit/layout/ContentPane", "dojo/parser"]);

CSS：

html, body {
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
}

#appLayout {
height: 100%;
}
#leftCol {
width: 14em;
}
4

1 回答 1

0

我建议查看教程页面上的“完整演示”，然后使用 firebug 将您的代码与示例进行比较。通常他们会遗漏一个额外的“demo.css”文件或其他你真正需要将所有东西拼接在一起的东西。

于 2012-06-29T09:16:01.863 回答