×
Namespaces

Variants
Actions
Revision as of 06:46, 5 July 2012 by hamishwillee (Talk | contribs)

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

DrY Toggle and togglelist

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Code ExampleArticle
Created: symbianyucca (16 May 2010)
Last edited: hamishwillee (05 Jul 2012)
DrY Toggle component is based on Nokia Web templates component, and the toggle list then is own implementation implementing a list having the toggle controls in it. Themes for the component are takes from Guarana and Theme roller.

Following code snipped shows on how a simple toggle control can be constructed:

dojo.require("dry.ToggleSwitch");
 
var tgle = new dry.ToggleSwitch({
isOn: true,
styleTweaker: styleTweaker,
changed:ratingChanged,
offText:"Off",
onText:"on"}, '
controlDiv');

The constructor takes 2 items, where the last one is the name for the div where the toggle component is placed in and the first argument is a struct defining the properties fort he component:

  • isOn: initial state fort he toggle true/false,
  • changed: callback function for change events,
  • offText: text fort he Off-State,
  • onText: text fort he On-State,
  • styleTweaker: styleTweaker for the themes.

And then following code snipped shows on how the toggle list can be used:

dojo.require("dry.ToggleList");
 
var toggleData = [
{
toggle: {
isOn: true,
changed:ratingChanged,
offText:"Off",
onText:"on"
},
title: "On/Off me",
togleid: "FirstToggle"
},{
toggle: {
isOn: true,
changed:ratingChanged,
offText:"10",
onText:"100"
},
title: "Rate me",
togleid: "SecondToggle"
},{
toggle: {
isOn: false,
changed:ratingChanged,
offText:"No",
onText:"Yes"
},
title: "Cool ?",
togleid: "ThirdToggle"
}];
 
var hw = new dry.ToggleList({
toggles:toggleData,
styleTweaker: styleTweaker,
destroyed:togle

The constructor takes 2 items, where the last one is the name for the div where the toggle list component is placed in and the first argument is a struct defining the properties fort he component:

  • toggles: array of toggle control items,
  • destroyed: callback function for the destroyed event,
  • styleTweaker: styleTweaker for the themes.


Examples

Component browser at dev.DrJukka.com/DrY/

WRT example at Wiki: DrY ToggleSwitch.zip

WRT example at Wiki: DrY ToggleSwitch list.zip

Go to DrY Index

This page was last modified on 5 July 2012, at 06:46.
64 page views in the last 30 days.
×