Question

我正在做一个小项目，并且正在使用Dojo。目前我无法正常加载所有内容。我正在尝试使用Tundra主题。

基本上，问题是TabContainer缺少标签，有serif字体而不是sans-serif，并且在其中显示所有ContentPanes而不是在非活动标签中隐藏它们。 serif问题也适用于我尝试创建的所有其他Dijit元素，但是Dijit表单元素似乎工作得更好（除了字体不正确，它具有正确的样式，验证和其他花哨的东西工作正常）。

使用其他Dijit主题时会出现同样的问题，但TabContainer边框颜色随每个不同的主题而变化，这让我相信Dijit主题可能正确加载。 Dojo似乎正在正确创建Dijit元素，查看下面的Firebug输出。

在js / dojo中存在Dojo 1.3.2 dojo，dijit和dojox目录的完整副本。所有链接的样式表和脚本最初都是加载的，并且它们的路径是正确的（我已经过测试，确认js中的警告框和css中的体色变化）。

的index.html

<!DOCTYPE HTML>
<html>
<head>
<link href="js/dojo/dijit/themes/tundra/tundra.css" rel="stylesheet">
<script src="js/dojo/dojo/dojo.js"></script>
<script src="js/script.js"></script>
</head>
<body class="tundra">
<div id="xmldiv">
</div>
<script language="javascript">xmlEnableDiv('xmldiv');</script>
</body>
</html>

JS /的script.js

function xmlEnableDiv(div) {
    dojo.require("dijit.layout.TabContainer");
    dojo.require("dijit.layout.ContentPane");

    var tc = new dijit.layout.TabContainer({
    }, div);

    var cp1 = new dijit.layout.ContentPane({
        id: "xmleditor",
        title: "Editor",
        content: "This is where the editor will actually go"
    });
    tc.addChild(cp1);

    var cp2 = new dijit.layout.ContentPane({
        id: "xmltext",
        title: "Source",
        content: "This is where the source will actually go"
    });
    tc.addChild(cp2);
}

检查Firebug，我看到以下内容（我的眼睛看起来应该如此）：

<body class="tundra">
    <div id="xmldiv" class="dijitTabContainer dijitContainer dijitTabContainerTop dijitLayoutContainer" widgetid="xmldiv">
        <div id="xmldiv_tablist" class="dijitTabContainerTop-tabs" dojoattachevent="onkeypress:onkeypress" wairole="tablist" role="tablist" widgetid="xmldiv_tablist"/>
        <div class="dijitTabSpacer dijitTabContainerTop-spacer" dojoattachpoint="tablistSpacer"/>
        <div class="dijitTabPaneWrapper dijitTabContainerTop-container" dojoattachpoint="containerNode" role="tabpanel">
            <div id="xmleditor" class="dijitContentPane" title="" widgetid="xmleditor" role="group">This is where the editor will actually go</div>
            <div id="xmltext" class="dijitContentPane" title="" widgetid="xmltext" role="group">This is where the source will actually go</div>
        </div>
    </div>
    <script language="javascript">
        xmlEnableDiv('xmldiv');
    </script>
</body>

实际输出（在Firefox和Chrome中）是一个带有主题边框的框（TabContainer）。 TabContainer上没有选项卡，两个ContentPanes同时可见（两者都使用serif字体）。

我尝试过的事情无济于事：

在我的初始化函数结束时执行dojo.parser.parse（）
尝试其他Dijits。它们的行为类似，因为它们似乎部分加载。每个Dijit都有serif字体而不是sans-serif，但是表单元素和对话框都显示正确的字体

先谢谢，这让我疯了。

Answer 1

解决方案是在创建TabContainer后添加启动。

感谢此帖：http://www.dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/tabcontainer-labels-not-rendering-when-created-programatically

tabContainer = new dijit.layout.TabContainer({
}, div);
tabContainer.startup();

Answer 2

另一种可能性是，即使在调用启动之后，将TabContainer添加到隐藏元素也可能缺少选项卡，如上所述。解决方案是确保TabContainer接收resize事件。您可以通过查找选项卡容器的ID，然后在控制台中执行此操作来自行尝试：

dijit.byId('dijit_layout_TabContainer_0').resize();

如果显示标签，则表示您有调整大小问题。确保父容器处理/将resize事件传递给选项卡容器子级。例如：

    resize: function() {
        this.tabContainer.resize();
    }

缺少Dijit TabContainer标签，serif字体，所有容器都可见

2 个答案: