×
Namespaces

Variants
Actions

Accordion

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: User:Kbwiki (06 Nov 2009)
Last edited: hamishwillee (30 Jul 2012)

Contents

Inheritance

Nokia.Accordion
|- Nokia.Widget
|- Nokia.Class (basic class)

1 - Description

An expandable/collapsible content pane. Applicable when content must be displayed within limited space. Labeled groups of information are displayed on the screen as a menu. The user can just hover over any option and this action may highlight it. When selecting the option, this option must “open up” to show what is inside. An expandable list component is used to compress several items within one item. This is largely used to compose menus with submenus.


2 - Visual Design

Accordion01.png


3 - Component Dependencies

3.1 CSS

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/<theme>/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">


3.2 Javascript

<!-- jQuery file -->
<script src="/lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

4 - Functional Specifications/Requirements

4.1 - Options

  • element: 'selector'
    • jQuery selector or the DOM reference to become the container of the component.
  • collapsible: boolean
    • Defines whether all the sections can be closed at once. Allows collapsing the active section by the triggering event (click is the default).
  • multiple: boolean
    • Allow multiple sections openend (like a panel).
  • closed: boolean
    • Render the component with all sections closed.
  • header
    • Selector for the header element.
  • Icons
    • Icons to use for headers. Icons may be specified for header and headerSelected, and we recommend using the icons native to the jQuery UI CSS Framework manipulated by the jQuery UI ThemeRoller.

4.2 - Events - Callbacks

  • create: function()
    • Scope: [this.element]
  • toggle: function(event, header, content)
    • Scope: [this.element]
  • open: function(event, header, content)
    • Scope: [this.element]
  • close: function(event, header, content)
    • Scope: [this.element]


4.3 - Methods

  • toggle: function(index, event)
    • Closes all opened sections of the accordion
    • return void
  • closeAll: function()
    • Closes all opened sections of the accordion
    • return [jQuery collection]
  • getActiveContents: function()
    • Returns a jQuery collection of all opened/active accordion contents
    • return [jQuery collection]
  • getActiveHeaders: function()
    • Returns a jQuery collection of all opened/active accordion headers
    • return [jQuery collection]


4.4 - Default options

  • event: 'click'
  • header: '> li > :first-child,> :not(li):even'
  • icons: { header: "ui-icon-triangle-1-e", headerSelected: "ui-icon-triangle-1-s" }
  • multiple: true
  • collapsible: true
  • closed: false


5 - Component Demo

5.1 HTML

<div id="accordion">
     <h3><a href="">Section 1</a></h3>
     <div>
          <p>
          Mauris mauris ante, blandit et, ultrices a, suscipit eget.
          </p>
     </div>
     <h3><a href="">Section 2</a></h3>
     <div>
          <p>
          Mauris mauris ante, blandit et, ultrices a, suscipit eget.
          </p>
     </div>
     <h3><a href="">Section 3</a></h3>
     <div>
          <p>
          Mauris mauris ante, blandit et, ultrices a, suscipit eget.
          </p>
     </div>

</div>

5.2 Javascript

var accordion = new Nokia.Accordion({
     element: '#accordion',
     collapsible: true,
     multiple: false,
     closed: true,
     toggle: function(event, header, content) {
          //alert('Accordion: Toggle', event, header, content, this.element);
     },
     create: function() {
          //alert("Accordion: Start");
     },
     open: function(event, header, content) {
          //alert('Accordion: Open', event, header, content, this.element);
     },
     close: function(event, header, content) {
          //alert('Accordion: Close', event, header, content, this.element);
     }
});


6 - Nokia WRT Browser Compatibility

 

▴   S60 3.1 S60 3.2 S60 5.0
Accordion YES  YES  YES 

 

This page was last modified on 30 July 2012, at 10:34.
56 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.

×