v 1.1.3

modo.ToggleButton

This is a normal modo button with extra functionality - it can be toggled by click, or manually with the set() function.

Use this element to represent a true/false value.

Constructor

modo.ToggleButton(params)modo.ToggleButton

The following list of parameters can be used in the params object, passed to the constructor. Parameters in [brackets] are optional.

PropertyDescription

[label]

A label to be applied on the button

[tooltip]

A tooltip to be applied on the button - will be displayed on mouse over.

[disabled]

Set to true, to disable the button initially.

Properties

Inherited Properties from modo.Button

[IMPORT ERROR: Marker not found]

Methods

get()boolean

Returns the buttons' current toggle status (true/false).

set([value])this

Sets the button either to toggled, or not toggled (pass true or false). Omit the parameter to swith the buttons current state.

lock([value])this

Locks, or unlocks the button for user interaction. Pass true or false to the method to lock, or unlock it. If the value is omitted, the button will be locked.

A locked button cannot be toggled by user interaction; only through the set() method.

Inherited Methods from modo.Button

focus()this

Sets the user focus to the button (so the button can be triggered with the enter key)

blur()this

Removes the focus from the button if any.

setLabel(label, tooltip)this

Updates the button label with the given value. Passing a new tooltip is optional. If you want to set a tooltip, but no new label, simply pass null as label value. Triggers a update event.

enable()this

Enables the button to capture clicks. Removes the CSS-Class mdo-disabled from its DOM element. Triggers the Backbone Event "enabled".

disable()this

Disables the button to not capture any clicks. Adds the CSS-Class mdo-disabled to its DOM element. Triggers the Backbone Event "disabled".

Inherited Methods from modo.Element

setFlexible([value])this

Pass either true or false to this value to make the element stretch inside a modo.FlexContainer element.

show(options)this

Make the connected DOM object visible and trigger the Backbone Event "show".

You can control the way the element is shown by passing an object of options.

Example:

element.show({
    effect: 'slideDown',
    effectArgs: ['fast']
});

hide()this

Make the connected DOM object invisible and trigger the Backbone Event "hide".

You can control the hide effect the same way as with the show() method.

addClass(classname, doPrefix)this

Will add another class name to the DOM element. The class name will be automatically prefixed (i.e. with mdo-) if doPrefix = true (default).

removeClass(classname, doPrefix)this

Will remove a class name from the DOM element. The class name will be automatically prefixed.

addClassTemporary(classname, timeout, doPrefix)this

Helps with adding a classname temporarily to the object. Just call this method and after the specified amount of time, the added class(es) will be removed.


Note: All modoJS Objects are extended with all methods of the Backbone.Events class.


Events

change

Triggered when the button state changed.

Inherited Events from modo.Button

click

Triggered, when the button is enabled and a user has clicked on it.

Event parameterDescription

event

The click event object

enabled

Triggered, when the button has been enabled through enable().

disabled

Triggered, when the button has been disabled through disable().

update

Triggered, when the buttons label and/or tooltip has been changed through setLabel().

Inherited Events from modo.Element

show

Triggered, when the object has been displayed through show()

hide

Triggered, when the object has been hidden through hide()

CSS Classes

mdo-togglebutton

Applied to the element itself.

mdo-toggled

Applied, when the elements value is true (toggled).

Inherited CSS Classes from modo.Button

mdo-button

Applied on the button element.

mdo-disabled

Applied when the element has been disabled through disable(). Will be removed after a call to enable().

comments powered by Disqus