×
Namespaces

Variants
Actions

Transition List in Guarana UI

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: User:Kbwiki (09 Nov 2009)
Last edited: hamishwillee (01 Aug 2012)

Contents

Inheritance

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

1 - Description

Transition List can be used as an alternative to show the sub-items of a list. Keep the list navigation path in the title area as the following figure depicts. This list navigation path can be used to return to a previous list.

2 - Visual Design

Crossfadetransitionlist01.png Crossfadetransitionlist02.png Crossfadetransitionlist03.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.
  • title: string
    • Defines the component title.
  • visible: boolean
    • Defines the visible state for the component.
  • maximized: boolean
    • Defines that component will be created in maximized mode.


4.2 - Events - Callbacks

  • create: function()
    • Scope: [this.element]
  • show: function(openerTransitionList)
    • Scope: [this.element]
  • hide: function()
    • Scope: [this.element]
  • addItem: function(event, item)
    • Scope: [this.element]
  • removeItem: function(event, item)
    • Scope: [this.element]

4.3 - Methods

  • addItem: function(item)
    • Adds a new item in the component.
    • return [void]
  • removeItem: function(item)
    • Removes a specific item from the component.
    • return [void]
  • show: function(openerTransitionList)
    • Shows the component.
    • return [void]
  • hide: function()
    • Hides the component.
    • return [Object]


4.4 - Default options

  • title: ",
  • maximized: true,
  • visible: false

 

5 - Component Demo

5.1 HTML

<div id="library"></div>
<div id="entertainment"></div>
<div id="health"></div>


5.2 Javascript

bookStore = new Nokia.TransitionList({
     element: '#library',
     title: 'Book Store',
     visible: true,
     create: function() {
          console.log("create");
     },
     show: function(openerTransitionList) {
          console.log("show", openerTransitionList);
      },
     hide: function() {
          console.log("hide list1.");
     },
     addItem: function(event, item) {
          console.log("addItem", item);
     },
     removeItem: function(event, item) {
          console.log("removeItem", item);
     }
 });

var entertainment = new Nokia.TransitionList({
     title: 'Entertainment',
     element: '#entertainment'
});
var health = new Nokia.TransitionList({
     title: 'Health',
     element: '#health'
});

bookStore.addItem(
     new Nokia.TransitionListItem({
          label: 'Entertainment',
          linkedList: window.entertainment,
          click: function() {}
     })
);
bookStore.addItem(
     new Nokia.TransitionListItem({
          label: 'Romance',
          linkedList: window.romance,
          click: function() {}
     })
);

window.entertainment.addItem(
     new Nokia.TransitionListItem({
          label: 'Book 1',
          icon: 'ui-icon-note',
          click: function() {
               alert('Book 1');
          }
      })
);
window.entertainment.addItem(
     new Nokia.TransitionListItem({
          label: 'Book 2',
          icon: 'ui-icon-note',
          click: function() {
               alert('Book 2');
          }
     })
);
window.entertainment.addItem(
     new Nokia.TransitionListItem({
          label: 'Back to list',
          icon: 'ui-icon-triangle-1-w',
          linkedList: window.bookStore,
          click: function() {}
     })
);

window.romance.addItem(
     new Nokia.TransitionListItem({
          label: 'Book 1',
          icon: 'ui-icon-note',
          click: function() {
               alert('Book 1');
          }
     })
);
window.romance.addItem(
     new Nokia.TransitionListItem({
          label: 'Book 2',
          icon: 'ui-icon-note',
          click: function() {
              alert('Book 2');
          }
     })
);
window.romance.addItem(
     new Nokia.TransitionListItem({
     label: 'Back to list',
     icon: 'ui-icon-triangle-1-w',
     linkedList: window.bookStore,
          click: function() {}
     })
);

6 - Nokia WRT Browser Compatibility

 

▴   S60 3.1 S60 3.2 S60 5.0
Transition List NO  YES  YES 

 

This page was last modified on 1 August 2012, at 04:32.
42 page views in the last 30 days.
×