×
Namespaces

Variants
Actions
(Difference between revisions)

GuaranaUI View Object

From Nokia Developer Wiki
Jump to: navigation, search
allanbezerra (Talk | contribs)
(Page structure for GuaranaUI View Object)
 
allanbezerra (Talk | contribs)
(Updating View Options)
Line 31: Line 31:
  
 
=4 - Functional Specifications/Requirements=
 
=4 - Functional Specifications/Requirements=
 
  
 
==4.1 - Options==
 
==4.1 - Options==
 
  
*element: 'selector'  
+
*container: 'selector'  
 
**jQuery selector or the DOM reference to become the container of the component.  
 
**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 [http://www.themeroller.com jQuery UI ThemeRoller.]
 
  
 
==4.2 - Events - Callbacks==
 
==4.2 - Events - Callbacks==

Revision as of 17:06, 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

  • 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 

 

50 page views in the last 30 days.