0

これは、dojo1.7 レイアウト アクティングスクリューの続きのようなものです。

それで、いくつかの機能するウィジェットを作成してテストし、 http://dojotoolkit.org/documentation/tutorials/1.7/dijit_layout/のチュートリアルを使用して自分の作業を変更して、レイアウトを素敵にしようとしました。多くの興味深い方法で失敗した後 (つまり、私の最後の質問)、私は新しい道を歩み始めました。私の計画は、レイアウトのチュートリアルの例を実装してから、ウィジェットに貼り付けることです。なんらかの理由で、チュートリアルに従ってもうまくいきません...すべてがロードされてから消え、空白のブラウザー ウィンドウが残ります。

何か案は？

ブラウザの互換性の問題である可能性があることに気づきました。私は Firefox 13.0.1 に取り組んでいます。私の知る限り、Dojo はこれと互換性があるはずです...

とにかく、いくつかのコードがあります：

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.ContentPane"
            data-dojo-props="region: 'center'">
        <div>
            <h4>Group 1 Content</h4>
            <p>stuff</p>
        </div>
        <div>
            <h4>Group 2 Content</h4>
        </div>
        <div>
            <h4>Group 3 Content</h4>
        </div>
    </div>
    <div
            class="edgePanel"
            data-dojo-type="dijit.layout.ContentPane"
            data-dojo-props="region: 'top'">
                Header content (top)
    </div>
    <div
        id="leftCol" class="edgePanel"
        data-dojo-type="dijit.layout.ContentPane"
        data-dojo-props="region: 'left', splitter: true">
            Sidebar content (left)
    </div>
</div>
</body>

道場の構成:

var dojoConfig = {
        baseUrl: "${request.static_url('mega:static/js')}", //this is in a mako template
        tlmSiblingOfDojo: false,
        packages: [
            { name: "dojo", location: "libs/dojo" },
            { name: "dijit", location: "libs/dijit" },
            { name: "dojox", location: "libs/dojox" },
        ],
        parseOnLoad: true,
        has: {
                "dojo-firebug": true,
                "dojo-debug-messages": true
            },   
       async: true 
    };

他のjsのもの：

require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
    "dijit/layout/ContentPane", "dojo/parser"]);

CSS:

html, body {
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
}

#appLayout {
height: 100%;
}
#leftCol {
width: 14em;
}
4

1 に答える 1

0

チュートリアル ページで「完全なデモ」を表示し、firebug を使用してコードを例と比較することをお勧めします。多くの場合、追加の 'demo.css' ファイルまたは実際にすべてをつなぎ合わせるために必要なものが除外されます。

于 2012-06-29T09:16:01.863 に答える