« タイトルペイン | トップページ | ページコンテナ »

2007年8月 8日 (水)

アコーディオン

AccordionContainerは、複数のタイトル付きブロックを作成する。このとき、常に表示されるブロックは1つのみとなる。 AccordionContainerの一つのブロックのみを見るとTitlePaneに似ている。

いずれかのタイトルをクリックすると、アコーディオンのように表示されていたブロックが閉じられ、クリックしたタイトルのブロックが表示される。

AccordionConpainerを利用するときは、dojo.widget.AccordionContainerをrequireする。まず、属性dojoType="AccordionContainer"を付けたdiv要素を作成し、その子要素としてContentPaneを並べる。このContentPaneがブロックになる。

AccordionContainerの属性として以下を指定できる。

属性概要
labelNodeClassタイトルに適用するCSSのクラス名
containerNodeClass中身に適用するCSSのクラス名
durationブロックの開閉にかかる時間

ContentPaneの属性として以下を指定できる。また、ContentPaneは onShow, onHideのイベントを指定できる。

属性概要
labelタイトルに表示する文字列
href表示するHTMLのURLを指定する。
selected最初に開いた状態で表示するブロックに対してtrueを指定する
<script type="text/javascript">
  dojo.require("dojo.widget.AccordionContainer");
  dojo.require("dojo.widget.ContentPane");
</script>

<div dojoType="AccordionContainer" duration="200" 
     labelNodeClass="label" containerNodeClass="accBody"
     style="float:left; width:300px; height:300px; overflow:hidden">

  <div dojoType="ContentPane" selected="true" label="Pane 1" style="overflow: scroll;">
    <p>Page1</p>
  </div>

  <div dojoType="ContentPane" label="Pane 2" style="display:none;">
    <p>Page2</p>
  </div>

  <div dojoType="ContentPane" label="Pane 3" style="display:none;">
    <p>Page3</p>
  </div>
</div>

Page1

Page2

Page3

« タイトルペイン | トップページ | ページコンテナ »

コメント

コメントを書く

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

トラックバック

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

この記事へのトラックバック一覧です: アコーディオン:

« タイトルペイン | トップページ | ページコンテナ »