modo.Checkbox
A CheckBox Element. It can either have a label, or not. Bindable to Backbone.Model objects.
By default, a HTML input checkbox element is used. However - if you need to style your checkboxes, you can always
set custom = true
when creating a checkbox, so a DIV will be used instead of the HTML input element.
Constructor
modo.Checkbox(params)modo.Checkbox
The following list of parameters can be used in the params object, passed to the constructor. Parameters in [brackets] are optional.
Property | Description |
---|---|
[label] | A label to be placed next to the checkbox |
[tooltip] | A tooltip to be applied on the button - will be displayed on mouse over. |
[custom] | Set to |
[model] | Set a model here to bind the checkboxes value to a Backbone.Model property (type should be Boolean) |
[modelKey] | This is mandatory for using the |
[value] | Optionally set an initial value for the checkbox. ( |
[className] | A string with custom CSS classes to apply to the generated DOM element |
[dataAttributes] | A object with attributes to assign to the generated DOM element. Omit the "data-" part. So for example |
[el] | The jQuery enhanced DOM element to be generated. If nothing is set, a standard DIV container will be created. If you want to use a different DOM element, pass a jQuery generated DOM element to this parameter. |
[showEffect] | The default show effect for the element. See associated property description. Default: |
[hideEffect] | The default hide effect for the element. See associated property description. Default: |
Properties
valueBool
Can be used to retrieve the current check status of the object.
Inherited Properties from modo.Element
elObject
Contains the jQuery enhanced DOM Node of this modoJS element.
modoIdNumber
Contains a internally given, numeric ID for this element.
visibleBool
Will be set by .show()
and .hide()
. Access this property to check the current visibility of the element.
showEffectobject
Set a default show effect (like the options you can pass to the show()
/ hide()
methods.
Example:
element.showEffect = {
effect: 'slideDown',
effectArgs: ['fast']
};
hideEffectobject
Define a default hide effect instead of a simple, instant hide.
Methods
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".
set(value)this
Pass true or false here to change the elements value manually. If the element is bound to a model, the models property will be changed as well.
get()boolean
Returns the current value.
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 elements value has been changed through set()
.
click
Triggered, when the button is enabled and a user has clicked on it.
Event parameter | Description |
---|---|
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()
.
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-checkbox
Applied on the element.
Also applied to a span
tag inside the element to act as a checker when the custom
property has been set to true.
mdo-checkbox-label
Applied to a span
tag to act as a label.
mdo-checked
Applied to the element when the elements value is set to true
.
mdo-disabled
Applied when the element has been disabled through disable()
. Will be removed after
a call to enable()
.
Inherited CSS Classes from modo.Element
mdo-element
Basic class that will be applied to every element that extends modo.Element
.
mdo-flexible
Will be applied to every modo element where setFlexible(true)
has been called upon.