Fatal编程技术网
  • dojo/
  • Dojo Dijit选项卡缺少容器选项卡，衬线字体，所有容器可见

Dojo Dijit选项卡缺少容器选项卡，衬线字体，所有容器可见

dojo

Dojo Dijit选项卡缺少容器选项卡，衬线字体，所有容器可见,dojo,tabcontainer,Dojo,Tabcontainer,我有一个小项目，我正在做，并使用Dojo。目前我不能把所有东西都装好。我试着用苔原这个主题 本质上，问题在于TabContainer缺少选项卡，使用衬线字体而不是无衬线字体，并显示其中的所有内容窗格，而不是在非活动选项卡中隐藏内容窗格。serif问题也适用于我尝试创建的所有其他Dijit元素，但是Dijit表单元素似乎工作得更好一些（除了字体不正确之外，它有正确的样式，验证和其他花哨的东西工作得很好） 使用其他Dijit主题时也会出现同样的问题，但是TabContainer边框颜色会随着每个不同

我有一个小项目，我正在做，并使用Dojo。目前我不能把所有东西都装好。我试着用苔原这个主题

本质上，问题在于TabContainer缺少选项卡，使用衬线字体而不是无衬线字体，并显示其中的所有内容窗格，而不是在非活动选项卡中隐藏内容窗格。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>
在检查Firebug时，我看到以下内容（在我看来应该是这样的）：


这就是编辑真正要去的地方
这就是源的实际去向
xmlEnableDiv（“xmldiv”）；
实际输出（在Firefox和Chrome中）是一个带有主题边框的框（TabContainer）。TabContainer上没有选项卡，两个内容窗格同时可见（都使用衬线字体）

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

  • 在init函数末尾执行dojo.parser.parse（）
  • 试试其他的迪吉特。它们的行为相似，因为它们似乎是部分负载。每个Dijit都有衬线字体而不是无衬线字体，但是除了不正确的字体外，表单元素和对话框都显示正确
提前感谢，这让我抓狂。

解决方案是在创建TabContainer后添加startup

感谢这篇文章：

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

dijit.byId（'dijit_layout_TabContainer_0'）.resize（）

如果出现选项卡，则存在调整大小问题。确保父容器处理/将调整大小事件传递给选项卡容器子容器。例如：


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



作为一个更新，一切都以声明的方式完美地工作，但不能以编程的方式工作。有人看到我的JavaScript有问题吗？

<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>



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



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