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.
Array or Object What gets passed to the handler - either the event object or an empty array.
Integer 1 (delay in ms)
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.

new SK.UI.Button( window, {
   caption: 'My Button'
})
.inject( document.body )
.addEvent('click', function () {
   alert('Button clicked!'); 
});

 

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.

new SK.UI.Button( window, {
   caption: 'My Blue Button',
   event: 'action',
   'class' : 'btn-secondary'
}).inject( document.body );
   
window.addEvent('action', function () {
   alert('The button is clicked.');
})

 

Multiple button classes can be added by separating them with an empty space.

new SK.UI.Button( window, {
   caption: 'My Blue Button',
   'class' : 'btn-alert btn-large'
}).inject( document.body );

 

A small icon button.

new SK.UI.Button( window, {
   caption: 'My Blue Button',
   'class' : 'btn-secondary btn-icon btn-icon-globe'
}).inject( document.body );