×
Namespaces

Variants
Actions
(Redirected from Transition)

Transition 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 uses fade in and fade out effects to change the displayed subject.

2 - Visual Design

Crossfadetransition01.pngCrossfadetransition02.pngCrossfadetransition03.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

  • nextLabel: String
    • Defines the label used in next element indication.
  • prevLabel: String
    • Defines the label used in previous element indication.
  • maximize: boolean
    • Defines whether the component is created as maximised.
  • Icons
    • Icons to use for "more elements". We recommend using the icons native to the jQuery UI CSS Framework, manipulated by jQuery UI ThemeRoller.
  • content
    • TO DO

4.2 - Events - Callbacks

  • create: function()
    • Scope: [this.element]
  • show: function(openerTransitionBox)
    • Scope: [this.element]
  • hide: function()
    • Scope: [this.element]

4.3 - Methods

  • setNextTransitionBox: function(transitionBox)
    • Defines the next view for a specific element.
    • return [void]
  • setPrevTransitionBox: function(transitionBox)
    • Defines the previous view for a specific element.
    • return [void]

4.4 - Default options

  • nextLabel: 'Next',
  • prevLabel: 'Prev',
  • maximized: true,
  • icons: { prev: 'ui-icon-circle-arrow-w', next: 'ui-icon-circle-arrow-e' }


5 - Component Demo

5.1 HTML

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


5.2 Javascript

var bookStore = new Nokia.TransitionBox({
     element: '#library',
     title: 'Book Store',
     visible: true,
     content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
     create: function() {
          console.log("create");
     },
     show: function(openerTransitionBox) {
          console.log("show", openerTransitionBox);
     },
     hide: function() {
          console.log("hide list1.");
     }
});

var entertainment = new Nokia.TransitionBox({
     title: 'Entertainment',
     element: '#entertainment',
     content: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
});

var health = new Nokia.TransitionBox({
     title: 'Health',
     element: '#health',
     content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
});

bookStore.setPrevTransitionBox();
bookStore.setNextTransitionBox(window.entertainment);

entertainment.setPrevTransitionBox(window.bookStore);
entertainment.setNextTransitionBox(window.health);

health.setPrevTransitionBox(window.entertainment);
health.setNextTransitionBox();

6 - Nokia WRT Browser Compatibility

 

▴   S60 3.1 S60 3.2 S60 5.0
Transition NO  YES  YES 

 

This page was last modified on 1 August 2012, at 01:34.
36 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.

×