« トースター | トップページ | アコーディオン »

2007年8月 5日 (日)

タイトルペイン

TitlePaneは、タイトルとその内容を表示し、タイトルをクリックすることで、その内容の表示/非表示を切り替えできる。

TitlePaneを作るときは、dojo.widget.TitlePaneをrequireし、属性 dojoType="TitlePane"を付けたdiv要素を作成する。TitlePaneのdiv要素には以下の属性を設定できる。

属性概要
labelタイトルに表示する文字列
labelNodeClassタイトルに適用するCSSのクラス名
containerNodeClass中身に適用するCSSのクラス名
href表示するHTMLのURLを指定する。
openfalseを指定すると、初期表示時に非表示となる。

TitlePaneのdiv要素の子要素がTitlePaneの内容となる。内容を子要素で指定するのではなく、href属性でURL指定することもできる。

<style type="text/css">
.label {
  width: 300px;
  background: #ffa500;
  border-top: 1px solid #dc143c;
  border-bottom: 1px solid #dc143c;
}
.content {
  width: 300px;
  background: #fff8dc;
}
</style>

<script type="text/javascript">
dojo.require("dojo.widget.TitlePane");
</script>

<div dojoType="TitlePane" label="タイトル" 
     labelNodeClass="label" containerNodeClass="content">
Dojo 0.4.2について少しずつ書いていきます。ここはまとめページ。

<p>Dojo http://dojotoolkit.org/ は、The Dojo Foundationにより
提供されているオープンソースのJavaScriptツールキットである。</p>

<p>Dojoは、Ajax呼び出しから、イベント処理、タブやツリーなどの
各種GUI部品など、広範な機能を提供しており、機能ごとにファイル
が分かれていて必要な機能だけを動的にロードする仕組みとなって
いるのが特徴となっている。ブラウザは、Safari 2.0.x, Opera 9.0+,
 IE(Windows) 6.0+, Firefox 1.0+/Mozilla, Konqueror 3.5+に対応
している。 </p>
</div>

Dojo 0.4.2について少しずつ書いていきます。ここはまとめページ。

Dojo http://dojotoolkit.org/ は、The Dojo Foundationにより 提供されているオープンソースのJavaScriptツールキットである。

Dojoは、Ajax呼び出しから、イベント処理、タブやツリーなどの 各種GUI部品など、広範な機能を提供しており、機能ごとにファイル が分かれていて必要な機能だけを動的にロードする仕組みとなって いるのが特徴となっている。ブラウザは、Safari 2.0.x, Opera 9.0+, IE(Windows) 6.0+, Firefox 1.0+/Mozilla, Konqueror 3.5+に対応 している。

« トースター | トップページ | アコーディオン »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/232684/7426377

この記事へのトラックバック一覧です: タイトルペイン:

« トースター | トップページ | アコーディオン »