Overview
The SK.UI.Button class allows you to create buttons and assign events to them. The new SK.UI.Button constructor returns the button DOM Element, not the instance.
Include Resource Files
/Shared/UIComponents/Internal/Buttons
css/style.css
<link type="text/css" rel="stylesheet" href="/Shared/UIComponents/Internal/Buttons/css/style.css">
Scripts/base.js
<script type="text/javascript" src="/Shared/UIComponents/Internal/Buttons/Scripts/base.js"></script>
The dependency files are included by default in the:
Property Sheet (edit binding)
Admin Area
Design Pro Editor
RTE
Parameters
Name | Description | Type | Default Value |
|---|---|---|---|
manager | The object that handles the button events. | Class isntance implementing MooTools. Events or DOM Element | null |
properties | A set of button properties. | Object | null |
isEnabled | Whether the button is enabled or not. | Boolean | null |
Button Properties
Name | Description | Type | Default Value |
|---|---|---|---|
class | Custom class name for the root DOM element. | String | 'btn-primary' |
caption | The text that appears on the button. | String | '' |
event | Name of the event which should be fired by the 'manager' on click. | String | '' |
pass_event_obj | Whether to pass the event {} to the handler when the button is clicked. | Boolean | false |
Button Classes
The button class determines the visual style of the button.
Color
btn-primary | btn-secondary | btn-alert |
Size
If you don't add a size class the button will display normally.
btn-small | Normal size | btn-large |
|
Icon Buttons
In order to add an icon to a button one must include both btn-icon class and the specific class for the icon.
btn-icon-gear | btn-icon-add | btn-icon-preview | btn-icon-globe |
| |||
btn-icon-edit | btn-icon-reload | btn-icon-reload-dark | btn-icon-open |
btn-icon-delete | btn-icon-plus | btn-icon-confirm | btn-icon-preference |
btn-icon-zoom | btn-icon-help | btn-icon-upload | btn-icon-pencil |
btn-icon-calculator | btn-icon-arrowright | btn-icon-arrowleft | btn-icon-sandbox |
btn-icon-x | btn-icon-check | ||
|
Methods
DOM Element
Name | Description | Parameters | Returns |
|---|---|---|---|
getManager | Returns the SK.UI.Button instance. | - | Object |
Instance
Name | Description | Parameters | Returns |
|---|---|---|---|
enable | Enables the button. | - | - |
disable | Disables the button. | - | - |
select | Selects the button. | - | - |
deselect | De-selects the button. | - | - |
getDomNode | Gets the button's DOM Element. | - | DOM Element |
Events
Name | Description | Arguments |
|---|---|---|
click | Triggers on clicking the button. | String The click event name. |
mouseover | Triggers when the mouse enters the button. | - |
mouseout | Triggers when the mouse exits the button. | - |
mousedown | Triggers when the left mouse button is pressed down over the button. | - |
mouseup | TTriggers when the left mouse button is released over the button. | - |
Examples
Creating a new SK.UI.Button instance and adding an event listener to the DOM Element.
Here is an example with some extra parameters. This will create a blue button, inject it to the body and add a click handler to the manager object.
Multiple button classes can be added by separating them with an empty space.
A small icon button.