dojo Dijitコンポーネントによるレイアウトの設定

　前回はDijitのコンポーネントを表示する方法を紹介したが、複数のコンポーネントが混在する場合は、レイアウトを整える必要があるだろう。そこで今回はレイアウトを設定するDijitコンポーネントを2つ紹介する。

アコーディオン：AccordionContainer、AccordionPane

図1 見出しをクリックして項目を開くAccordionContainer

　アコーディオンは右端が三角印の見出しをクリックすると、そこに書かれている項目が開かれるというものだ（テーマtundraの場合）。項目が開かれた見出しの右端は黒丸に変化する。

　コンポーネント全体はdijit.layout.AccordionContainer、各項目はdijit.layout.AccordionPaneで構成される。図1を表示するためにリスト1-1からリスト1-3（いずれも抜粋）を記述した。テーマを画面上に反映する方法は前回のリスト2を参考にしていただきたい。

リスト1-1 JavaScript

dojo.require( 'dojo.parser' );
dojo.require( 'dijit.layout.AccordionContainer' );

リスト1-2 CSS

@import "js/dijit/themes/tundra/tundra.css";
@import "js/dojo/resources/dojo.css";

div#ex1  {
  width  : 200px;
  height : 130px;
  margin : 10px;
}

リスト1-3 HTML

<script type="text/javascript" src="js/dojo/dojo.js"
        djConfig="parseOnLoad : true"></script>
<div id="ex1" dojoType="dijit.layout.AccordionContainer">
  <div id="ap1" title="dojoについて"
       dojoType="dijit.layout.AccordionPane">
    dojoは機能が豊富なJavaScriptライブラリです
  </div>
  <div id="ap2" title="Dijitについて"
       dojoType="dijit.layout.AccordionPane">
    Dijitはdojoに含まれる画面コンポーネントです
  </div>
  <div id="ap3" title="DojoXについて"
       dojoType="dijit.layout.AccordionPane">
    DojoXはdojoの拡張機能です
  </div>
</div>