0

既存のアプリケーションで Dojo を使用してタブ コントロールを実装しようとしています。ここに私がやったことのいくつかがあります：

<head> 
.....
<script type="text/javascript" src="js/dojo/dojo/dojo.js')}"></script>
<script type="text/javascript">
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
</script>
....
</head>
<body>
....
<div data-dojo-type="dijit.layout.TabContainer" style="width: 400px; height: 100px;" tabStrip="true">
    <div data-dojo-type="dijit.layout.ContentPane" title="title1" selected="true">
 ...content...
</div>
<div data-dojo-type="dijit.layout.ContentPane" title="title2">
...content...
</div>
</div>
....
</body>

js は正しく読み込まれます (firebug はエラーを表示しません)。

ページを参照すると、すべてのコンテンツ div が、書式設定がまったく行われていないかのように描画され、通常の div であることがわかります。

私の最初の推測は、私が含めるつもりだった css ファイルがあるということでした。私が見つけたすべての例は、私のアプリケーションには不適切な多くのことを行う非常に複雑な css ファイルにリンクしています。含める必要があるcssについての説明が見つからないため、この推測は間違っていると思われます。

誰かが私のエラーを指摘したり、簡潔で最新の例を教えてくれたりできますか?

4

1 に答える 1

0

ウィジェットは作成されましたか? ブラウザのコンソールで実行dijit.registryすると、作成されたウィジェットが表示されます。

それらが作成されていない場合は、HTML を解析するように Dojo を構成する必要があります。

<script type="text/javascript" src="dojo/dojo.js"
  data-dojo-config="parseOnLoad: true"></script>

Dojo はテーマを使用して、ウィジェットにルック・アンド・フィールを与えます。これを実現するには、次の css を追加する必要があります。

<link type="text/css" rel="stylesheet" href="dijit/themes/dijit.css" />
<link type="text/css" rel="stylesheet" href="dijit/themes/claro/claro.css" />

claro クラスを body ノードに追加します。

<body class="claro"/>
于 2012-06-27T11:59:25.547 に答える