Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

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

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

DrY Toggle and togglelist

From 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 03:46.
46 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.

×