DrY Toggle and togglelist

Article Metadata

---

Code Example

Source file: Media:DrY ToggleSwitch.zip Media:DrY ToggleSwitch list.zip

---

Article

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