Web Runtime WidgetでAccordionを使用する方法
Article Metadata
Code Example
Article
Contents |
Accordionとは
Accordionは、複数のペインを用意しておき、そのうちの一つを表示することができるWebコントロールです。各Accordionペインはタイトル名とコンテンツコンテナを保持します。あるペインがクリックされると、他のペインは非表示になります。
Accordionは、多くのアプリケーションで見ることができます。それはたとえば、Windows XPにおけるエクスプローラの左側のパネル、一部のWebページなどです。ここでは、Web Runtime Widgetでそれを使ってみます。
本記事では、PrototypeベースでのAccordionの実装を紹介し、Web Runtime Widgetでそれをどう使うかを伝授していきます。
スクリーンショット
Accordion.js のインストール、そのファイルの依存関係
Accordion.jsは、prototype.jsライブラリとscriptaculous.jsライブラリ(正確にはeffect.js)に依存しています。
上記ライブラリの全てをダウンロードし(下記参照サイトをご覧ください)、作成するWeb Runtime WidgetのメインHTMLファイルに、下記に示すコードを記述します。
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/accordion.js"></script>
また本例題のために、下記に示す通り、demo.js, demo.css の2つのファイルを追加する必要があります。
<link rel="stylesheet" type="text/css" href="demo.css" />
<script type="text/javascript" src="demo.js"></script>
これら2つのファイルは、Accordionのスタイルとその動的振舞いを定義します。本例題のソースコード中で、それらを確認できます。
注意事項: 本例題のprototype.jsライブラリのバージョンは1.5で、最新版の1.6ではありません。
Web Runtime WidgetでAccordionを使用する
本例題では、垂直方向に開閉するAccordionを紹介します。これは一般に使われているものです。あるAccordion中で入れ子になったAccordionを、垂直・水平方向の両方に対して使うことができます。本例題では、これらを確認していきます。
垂直Accordionレイアウトの使用
メインHTMLで、垂直Accordionコンテナを定義します。そのレイアウトは以下のようになります。
<div id="vertical_container" >
<h1 class="accordion_toggle">title for pane 1</h>
<div class="accordion_content">
content for pane 1
</div>
<h1 class="accordion_toggle">title for pane 2</h>
<div class="accordion_content">
content for pane 2
</div>
//
// more accordion panes.
// ...
</div>
上記コードにおけるdiv要素の"vertical_container"は、それがコンテナであり、ホールディングペイン(holding pane)として使われることを示しています。"accordion_toggle"要素は、ペインのタイトル名を定義します。"accordion_content"要素は、ペイン内のコンテンツを定義します。必要であれば、ペインを新たに追加することができます。
水平Accordionを定義する(入れ子ペインが水平方向)
垂直Accordionのペインの中に水平Accordionを作成するため、以下に示すコードを使用します。
<div id="vertical_container">
<h1 class="accordion_toggle">Use Prototype.js(Horizontal Nested)</h1>
<div class="accordion_content">
<h2>Use Horizontal Accordion</h2>
<div id="horizontal_container" >
<h3 class="horizontal_accordion_toggle">title for inner pane1</h3>
<div class="horizontal_accordion_content">
content for inner pane 1
</div>
// other panes here
// ...
</div>
</div>
上記コードにおける"horizontal_container"要素は、水平Accordionを定義します。これは、その外側にある垂直Accordionペインが保持するものです。"horizontal_accordion_toggle"要素はペインのタイトル名を定義し、"horizontal_accordion_content"要素はペイン内のコンテンツを定義します。必要であれば、ペインを新たに追加することができます。
垂直Accordionを定義する(入れ子ペインが垂直方向)
外部にある垂直Accordionペインの中に垂直Accordionを作成するため、以下に示すコードを使用します。
<h1 class="accordion_toggle">Use Prototype.js(Vertical Nested)</h1>
<div class="accordion_content">
<div id="vertical_nested_container" >
<h3 class="vertical_accordion_toggle">title for inner pane 1</h3>
<div class="vertical_accordion_content">
content for inner pane 1
</div>
</div>
// other panes here
// ...
</div>
上記コードにおける"vertical_nested_container"要素は、垂直Accordionを定義します。これは、その外側にある垂直Accordionペインが保持するものです。"vertical_accordion_toggle"要素はペインのタイトル名を定義し、"vertical_accordion_content"要素はペイン内のコンテンツを定義します。必要であれば、ペインを新たに追加することができます。
さらに詳しいガイドが必要な場合
下記サイトにあるAccordion.jsの作者の記事の"How to use"節をご覧ください: http://www.p51labs.com/accordion/.
サンプルアプリケーションをダウンロードする
本トピックのサンプルアプリケーションのダウンロード：File:AccordionDemo.zip
端末やエミュレータにインストールする際は、拡張子.zipを.wgzに変更します。
Prototypeの最新バージョンについては、Webサイト http://code.google.com/p/prototypewrt/downloads/list でご確認ください。
(no comments yet)