Dijit TabContainer 选项卡缺失，衬线字体，所有容器可见答案

【问题标题】：Dijit TabContainer tabs missing, serif fonts, all containers visibleDijit TabContainer 选项卡缺失，衬线字体，所有容器可见
【发布时间】：2009-08-13 01:18:03
【问题描述】：

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

本质上，问题在于 TabContainer 缺少选项卡，具有衬线字体而不是无衬线字体，并显示其中的所有 ContentPanes 而不是隐藏在非活动选项卡中的内容。衬线问题也适用于我尝试创建的所有其他 Dijit 元素，但 Dijit 表单元素似乎工作得更好一些（除了字体不正确，它有正确的样式，验证和其他花哨的东西工作正常）。

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

Dojo 1.3.2 dojo、dijit 和 dojox 目录的完整副本存在于 js/dojo 中。所有链接的样式表和脚本最初都在加载，并且它们的路径是正确的（我已经通过 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 都同时可见（都是衬线字体）。

我尝试过的事情没有成功：

在我的 init 函数结束时执行 dojo.parser.parse()
尝试其他 Dijit。它们的行为相似，因为它们似乎部分加载。每个 Dijit 都有衬线字体而不是无衬线字体，但除了不正确的字体之外，表单元素和对话框都可以正确显示

提前谢谢，这让我发疯了。

【问题讨论】：

作为更新，一切都以声明方式完美运行，但不能以编程方式运行。谁能看到我的 JavaScript 有问题？

标签： dojo tabcontainer

【解决方案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();

【讨论】：

【解决方案2】：

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

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

如果您的标签出现，那么您有调整大小的问题。确保父容器处理/将调整大小事件传递给标签容器子容器。例如：

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

【讨论】：