Categories: Lang-JP | JP S60 3rd Edition, Feature Pack 2 | JP Web Runtime (WRT)

This page was last modified 08:39, 25 April 2008.

From Forum Nokia Wiki

原文（英語）: How to Use Accordion in WRT widget?

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.stickmanlabs.com/accordion/

サンプルアプリケーションをダウンロードする

本トピックのサンプルアプリケーションのダウンロード：Image:AccordionDemo.zip

端末やエミュレータにインストールする際は、拡張子.zipを.wgzに変更します。

Prototypeの最新バージョンについては、Webサイト http://code.google.com/p/prototypewrt/downloads/list でご確認ください。

参照リンク

• Prototype JavaScript Webサイト[1]
• Scriptaculous JavaScript Webサイト[2]
• Accordion JavaScript Webサイト[3]
• サンプルWRTアプリケーションのダウンロード [4]