0

dojo1.7 を使用して単純なレイアウトを機能させようとしています。私が欲しいのはほとんど次のとおりです。

  1. ページ全体にまたがる一連のリンクやものを含むヘッダー行
  2. ページ全体にまたがる一連のリンクやものを含むフッター行
  3. 木が入った左側のサイドパネル
  4. いくつかのタブがある中央パネル

最初にすべてのウィジェットを作成し、それらをすべて同じページに表示しました。レイアウトをいじる前に、すべてが期待どおりに動作していました（関連するコードは質問の最後に含まれています）

まず、地域の設定はほとんど無視されているようです。ヘッダーはあるべき場所にあり、フッターはそのすぐ下にあります。これらの背後には、レイアウトのツリー部分とタブ部分があります。これらは両方とも左揃えです。Firebug は、「ツリー」の領域設定がないことを教えてくれます (「ツリー」は、ツリーが含まれる div の ID です)。

HTML

<body class="claro">
    <div
        id="appLayout" class="demoLayout"
        data-dojo-type="dijit.layout.BorderContainer"
        data-dojo-props="design: 'headline'">

            <div class="centerPanel"
    data-dojo-type="dijit.layout.TabContainer"
    data-dojo-props="region: 'center'"> 

                      <div data-dojo-type="dijit.layout.ContentPane" title="blah1" selected="true">
                        stuff
                      </div>
                      <div data-dojo-type="dijit.layout.ContentPane" title="blah2">
                        stuff
                      </div>            
</div>

<div    
        id="tree"
        class="edgePanel"
        data-dojo-type="dijit.layout.ContentPane"
        data-dojo-props="region: 'left', splitter: true">
</div>

            <div
                class="edgePanel"
                data-dojo-type="dijit.layout.ContentPane"
                data-dojo-props="region: 'bottom'">
                footer stuffs
            </div> 

            <div
                class="edgePanel"
                data-dojo-type="dijit.layout.ContentPane"
                data-dojo-props="region: 'top'">
                 heading stuffs

         </div>
    </div>     
</body>

js:

require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
    "dijit/layout/ContentPane", "dojo/parser"]);
require(["dijit/Tree"], function(Tree) {
tree = new Tree({ // create a tree
        model: my_model_that_works 
    }, "tree"); // target HTML element's id
tree.startup();
});

もう1つの奇妙なことは、「ツリー」divを次のように変更することで、ページのコンテンツ全体を非表示にできることです。

<div    
        id="tree_container"
        class="edgePanel"
        data-dojo-type="dijit.layout.ContentPane"
        data-dojo-props="region: 'left', splitter: true">
        <div id="tree"></div>
</div>
4

2 に答える 2

0

次のスニペットの要件に追加dojo/domReady!する必要があります。左側のペインであるコンテンツ ペインをツリーに置き換えません。左のコンテンツ ペインのコンテンツをツリーで設定します。

require(["dijit/Tree", "dojo/domReady!"], function(Tree) {
  tree = new Tree({ // create a tree
    model: my_model_that_works 
  });
  dijit.byId("tree").set('content', tree);
  tree.startup();
});

ツリーを作成するためのモデルはありませんが、他のすべての例が次の場所にあります。

http://jsfiddle.net/cswing/3AdMg/

于 2012-06-28T17:21:36.747 に答える
0

cssが抜けていました。Dojo のチュートリアルでは、必要なすべての CSS について実際に説明しているわけではありません。firebug を使用して、チュートリアルの例に使用された css を表示した後、問題を修正するのは簡単でした。

于 2012-06-29T14:29:32.087 に答える