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

沖林正紀
2008-02-01 07:00:00
  • このエントリーをはてなブックマークに追加
最新特集【一覧】

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

アコーディオン:AccordionContainer、AccordionPane

図1 見出しをクリックして項目を開くAccordionContainer 図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


dojoは機能が豊富なJavaScriptライブラリです
Dijitはdojoに含まれる画面コンポーネントです
DojoXはdojoの拡張機能です
  • 新着記事
  • 特集
  • ブログ