タグ別アーカイブ: 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>

dojo Toolkit

Zend_Framworkがdojoをサポートしたため、社内でもUIにはdojoを使うようにしました。

今までは、extやらYUIやら併存していたのですが、dojo一本でいく決心がつきました。

dojo1.2系のドキュメントやサンプルは少なめですので、

作成したサンプルは順次公開しようと思います。

やはりdojoが他のUIツールと決定的に違うのは、タグ拡張方式ということでしょう。

他はjavascriptでコントロールしますが、dojoは専用のタグを埋め込めば動作してしまいます。

これによって、デザインとプログラムを分けることがより簡単になります。

・・・とは言いますが、結局いろいろなことをさせるにはプログラムを書かなければいけないんですねぇ〜

HTMLファイル内には結局大量のjavascriptが埋め込まれることになります。

まだまだ検証しなければ。