Revision as of 17:17, 14 April 2010

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

• container: 'selector'
  • jQuery selector or the DOM reference to become the container of the component.

4.2 - Events - Callbacks

• show: function(arguments)
  • Scope: [this.element]
• hide: function(arguments)
  • 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

Not Applicable for this Component.

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