0

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

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

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

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

索引.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 都有衬线字体而不是无衬线字体，但是除了不正确的字体之外，表单元素和对话框都正确显示

在此先感谢，这让我发疯了。

4

2 回答 2

2

解决方案是在创建 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();
于 2009-08-13T04:31:28.673 回答
0

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

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

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

    resize: function() {
        this.tabContainer.resize();
    }
于 2013-09-04T10:05:33.867 回答