GuaranaUI View Object

Inheritance

Nokia.View 
    |- Nokia.Class (basic class)

1 - Description

Basec class to build views using GuaranaUI.

2 - Visual Design

Not Applicable for this Component.

3 - Component Dependencies

3.1 CSS

Not Applicable for this Component.

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