LeptonJS: The lepton.ui namespace

Classes in the lepton.ui namespace:

lepton.ui.Table

TODO: Render a paged table from a data provider

lepton.ui.Tooltip

^{NOTE: Not yet implemented}

Creates a dynamic tooltip

var t = new lepton.ui.Tooltip([options]);

Options

Option	Default	Description
backgroundColor	#404040	The color of the tooltip as a hexadecimal color value
opacity	0.7	The opacity as a float (0.0 to 1.0 where 1.0 is fully opaque)
parent	n/a	The parent element to attach to
text	n/a	The text to display in the tooltip - can also be set in the show method

Methods

Method	Description
show([text],[elem])	Shows the tooltip (by the specified element, with the specified text)
hide()	Hides the tooltip
setText(text)	Sets the text of the tooltip

lepton.ui.bluebox

Sets up an overlay for images, similar to lightbox and other image overlays. Place this in your head

lepton.ui.bluebox.setup(class[,options]);

The class parameter should point to a specific CSS classname, such as "image" or "bluebox". All anchors with the specified class will be hooked to display in a bluebox overlay.

Options

Option	Default	Description
overlayColor	#404040	The color of the overlay as a hexadecimal color value

Methods

Bluebox has no methods

Just set each image to class 'bluebox' or whatever you set up in the setup(). That's it!

lepton.ui.Overlay

Creates an overlay on top of the page, fading out the content and switching focus to the relevant elements.

var o = new lepton.ui.Overlay([options]);

Options

Option	Default	Description
backgroundColor	#404040	The color of the overlay as a hexadecimal color value
opacity	0.7	The opacity as a float (0.0 to 1.0 where 1.0 is fully opaque)
zIndex	9999	The zIndex of the overlay

Methods

Method	Description
show()	Shows the overlay
hide()	Hides the overlay

lepton.ui.InlineEditor

TODO: Converts an element into a editor

lepton.ui.Dialog

TODO: Converts an element into a floating dialog

lepton.ui.ToolBar

lepton.ui.TabBar

lepton.ui.Button

Creates a button to be added to the page, or to a toolbar or tabbar.

var b = new lepton.ui.Button(options,callback);

Options

Option	Default	Description
caption	Button	The caption of the button
id	none	The id of the button element
icon	none	The complete url of the icon to use

Callback

The callback is a function to call when the button is clicked. When using prototype within an object context, remember to bind properly:

var b = new Button({ caption:'Hello World' }, this.handleClick.bindAsEventListener(this));