0

私が行っている小さなプロジェクトがあり、そのために Dojo を使用しています。現時点では、すべてを適切にロードすることはできません。Tundra テーマを使用しようとしています。

基本的に、問題は TabContainer にタブがなく、sans-serif ではなく serif フォントがあり、非アクティブなタブに ContentPanes を隠すのではなく、その中にすべての 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 には、サンセリフではなくセリフ フォントがありますが、フォーム要素とダイアログは両方とも、正しくないフォントとは別に正しく表示されています

前もって感謝します、これは私を狂わせています。

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

もう 1 つの可能性は、非表示の要素に TabContainer を追加すると、スタートアップを呼び出した後でも、上記のようにタブが失われる可能性があることです。これを解決するには、TabContainer がサイズ変更イベントを確実に受け取るようにします。タブ コンテナーの ID を見つけて、コンソールでこれを実行することで、これを自分で試すことができます。

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

タブが表示される場合は、サイズ変更に問題があります。親コンテナーがサイズ変更イベントを処理し、タブ コンテナーの子に渡すことを確認します。例えば：

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