dojo tabContainer内のコンテンツのロード方法
2009 年 2 月 6 日
コメントは受け付けていません。
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>