DrY LightBox

Comments

(no comments yet)

Log in or Join to leave comments.

Article Metadata

---

Code Example

Source file: Media:DrY LightBox.zip

---

Article

Created: symbianyucca (16 May 2010)

Last edited: hamishwillee (05 Jul 2012)

DrY LightBox component is based on Guarana Button implementation, and ist functionality thus is rather similar to the Guarana implementation.

Following code snipped shows how it can be used:

dojo.require("dry.LightBox");
 
var buttonData = [
{
	button: {
		label: "Continue",
		clicked: clickedHandler,
		focused: focusedHandler,
		unfocused: unfocusedHandler,
		pressed: pressedHandler,
		unpressed: unpressedHandler
	},
	id: "ContinueCancelButtonId"
},{
	button: {
		label: "Cancel",
		clicked: clickedHandler,
		focused: focusedHandler,
		unfocused: unfocusedHandler,
		pressed: pressedHandler,
		unpressed: unpressedHandler
	},
	id: "CancelButtonId"
},{
	button: {
		label: "Remove",
		clicked: clickedHandler,
		focused: focusedHandler,
		unfocused: unfocusedHandler,
		pressed: pressedHandler,
		unpressed: unpressedHandler
		},
	id: "RemovelButtonId"
}];
 
var dialogData = "<h1>Lightbox Example</h1><p>Hello there <p>"
 
 
var dialog = new dry.LightBox({
	autoOpen: false,
	height: 300,
	width: 400,
	hidden: dialogHidden,
	shown: dialogShown,
	destroyed: dialogDestroyed,
	buttons:buttonData,
	content: dialogData,
	styleTweaker: styleTweaker}, 
	'DialogDiv');

The constructor takes 2 items, where the second one is the name for the div where the LightBox is placed in. The first argument is a struct defining the LightBox properties and callback functions:

• autoOpen: true/false, defines whether the dialog is shown when constructed,
• height: height for the component,
• width: width for the component,
• hidden: callback called when the dialog is Hidden,
• shown: callback called when the dialog is Shown,
• destroyed: callback called when the dialog is Destroyed,
• buttons: button definition array,
• content: html data shown in the dialog,
• styleTweaker: styleTweaker for handling the themes.

Examples

• Component browser at dev.DrJukka.com/DrY/
• WRT example at Wiki: DrY LightBox.zip

Go to DrY Index