Dojo/JavaScript Toolkitのメモ

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

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

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

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

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

<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>