Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

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

From 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.
176 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.

×