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.

Archived:How to Use Accordion in Symbian Web Runtime

From Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

Article Metadata
Code ExampleCompatibility
Platform(s):
S60 3rd Edition FP2
Article
Created: dougcn (06 Apr 2008)
Last edited: hamishwillee (13 Aug 2012)

Contents

What is Accordion

Accordion is a web control that allows you to provide multiple panes and display one of them at a time. Each accordion pane has a title and content container. When one is clicked, others will collapse.

We had seen Accordion used in many other fields, for example, the left-side panel of Windows XP Explorer and some web pages. Now it's time for us to use it in our WRT widgets.

In this article, I will introduce an prototype-based Accordion implementation and help you learn about how to use it in our WRT widget.

Screenshots

Accordiondemo screenshot1.jpg Accordiondemo screenshot2.jpg

Install Accordion.js and its dependencies

Accordion.js depends on prototype.js library and scriptaculous.js library(effect.js exactly).

Download all of the above libraries(see References below), and write code blocks into the main html of your WRT widget, like this:

<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>

We also need to add the other two files just for this example: demo.js and demo.css. Like this:

<link rel="stylesheet" type="text/css" href="demo.css" />
<script type="text/javascript" src="demo.js"></script>

These two files define the style of accordion and its dynamic behaviours. You can find them in the source code of this example.

Note: The version of prototype.js library in this example is 1.5, not the latest one -- 1.6.

Use Accordion in WRT widgets

A vertical accordion will be introduced in this example, it's used commonly. Nested accordions can be used in an accordion, either vertically or horizontally. You will see both of them in this example.

Use a Vertical Accordion Layout

In main HTML, define a vertical accordion container, its layout looks like this:

<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>

In the above, the "vertical_container" div element indicates that it's a container and used for holding panes. The "accordion_toggle" element defines the title of a pane, and the "accordion_content" element defines the content of that pane. As you need, you can add many panes.

Define a Horizontal Accordion (Nested Horizontally)

To create a horizontal accordion in one pane of the vertical accordion, use the following code block:

<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>

In the above, the "horizontal_container" element defines a horizontal accordion, contained in one pane of an outer vertical accordion. The "horizontal_accordion_toggle" element defines a pane title and the "horizontal_accordion_content" element defines the content of that pane. As you need, you can add many panes.

Define a Vertical Accordion (Nested Vertically)

To create a vertical accordion in one pane of an outer vertical accordion, use the code block below:

  <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>

In the above, the "vertical_nested_container" element defines a vertical accordion, contained by one pane of an outer vertical accordion. The "vertical_accordion_toggle" element defines a pane title and the "vertical_accordion_content" element defines the content for that pane. Certainly, you can add many panes.

Need More Guides?

Please refer to the "how to use" section of the article below from the author of Accordion.js.

 http://www.p51labs.com/accordion/.

Download Sample

Download sample widget: File:AccordionDemo.zip. To install it, just rename the suffix .zip to .wgz.

For the latest version, please go to http://code.google.com/p/prototypewrt/downloads/list

References

  • Prototype JavaScript Homepage [1]
  • Scriptaculous JavaScript Homepage [2]
  • Accordion JavaScript Homepage [3]
  • Download Sample WRT applications [4]
This page was last modified on 13 August 2012, at 06:53.
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.

×