カテゴリー別アーカイブ: dojo

dojo tabContainer内のコンテンツのロード方法

dojoのtabContainerは実装は簡単ですが、子供となるContentPaneの中にiframeなどがあると、

表示がうまくいかないことがあります。

表示されているContentPaneでないとうまく動作しないことが原因です。

よって複雑なページをタブ化する場合以下のようにするとうまく動作します。

1.タブコンテナにselectChildイベントハンドラをコネクト

2.ContentPaneを作るときにはcontentは空にしてタブコンテナに追加

3.selectChildイベントハンドラが呼ばれたときに、表示するContentPaneのcontentを設定(この中にiframeが含まれる)

これで外部のdojoページでもタブ化できます。

参考)タブコンテナにselectChildイベントハンドラを設定する方法

<div dojoType=”dijit.layout.TabContainer” id=”tab”>
<script type=”dojo/connect” event=”selectChild” args=”contentPane”>
var url = 適当なURL;
if(contentPane.contentLoaded != true) {
var contents = ‘<iframe src=”‘+url+'” frameborder=”0″ style=”width:100%; height:100%;” scrolling=”no”/>’;
contentPane.setContent(contents);
contentPane.setAttribute(“contentLoaded”, true);
}
</script>
</div>