×
Namespaces

Variants
Actions
Revision as of 16:57, 14 April 2010 by allanbezerra (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

GuaranaUI View Object

From Nokia Developer Wiki
Jump to: navigation, search

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 

 

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

×