×
Namespaces

Variants
Actions

Web Runtime WidgetでAccordionを使用する方法

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Code ExampleCompatibility
Platform(s):
S60 3rd Edition FP2
Article
Translated:
By fnjwikimng
Last edited: hamishwillee (27 Aug 2012)

Contents

Accordionとは

Accordionは、複数のペインを用意しておき、そのうちの一つを表示することができるWebコントロールです。各Accordionペインはタイトル名とコンテンツコンテナを保持します。あるペインがクリックされると、他のペインは非表示になります。

Accordionは、多くのアプリケーションで見ることができます。それはたとえば、Windows XPにおけるエクスプローラの左側のパネル、一部のWebページなどです。ここでは、Web Runtime Widgetでそれを使ってみます。

本記事では、PrototypeベースでのAccordionの実装を紹介し、Web Runtime Widgetでそれをどう使うかを伝授していきます。

スクリーンショット

Accordiondemo screenshot1.jpg Accordiondemo screenshot2.jpg

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 でご確認ください。

参照リンク

  • Prototype JavaScript Webサイト[1]
  • Scriptaculous JavaScript Webサイト[2]
  • サンプルWRTアプリケーションのダウンロード [3]
This page was last modified on 27 August 2012, at 02:15.
62 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×