Overview

SK.UI.ToolbarManager creates a UI grid into a given placeholder and provides the ability to add or remove buttons in specific segments called regions of that grid.

SK.UI.ToolbarManager requires SK.UI.Button. Optionally, SK.UI.Button.Dropdown is required for dropdown buttons.

 

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">
    • Scripts/dropdown.js
      <script type="text/javascript" src="/Shared/UIComponents/Internal/Buttons/Scripts/dropdown.js"></script> (optional)
  • /Shared/UIComponents/Internal/ToolbarManager
    • Scripts/toolbar_manager.js <script type="text/javascript" src="/Shared/UIComponents/Internal/ToolbarManager/Scripts/toolbar_manager.js"></script>

 

Parameters

Name Description Type
placeholder The element where the Toolbar will be injected. DOM Element or ID String
options The Toolbar options. Object

 

Options

Name Description Type Default Value
orientation The orientation of the toolbar - horizontal or vertical. String 'horizontal'

 

Methods

Name Description Parameters Returns
addItem Create and display a SK.UI.Button instance, add it to the items registry and inject the element to the DOM. id (String) - item name, will be added to the element as sk-button-[id]
manager (Class) - a manager Class instance, which inherits the MooTools Events methods
options (Object) - SK.UI.Button options, region: in which region to inject the button, order: at which spot		 Button's DOM Element
removeItem Remove the item from the items registry and destroy the DOM Element. id (String) - item name -
enableItem Enable an item. id (String) - item name -
disableItem Disable an item. id (String) - item name -
enableItems Enable multiple items. button_ids (Array) -
disableItems Disable multiple items. button_ids (Array) -
getDomNode Get the Toolbar placeholder. - DOM Element

 

Examples

Creating a Toolbar from an element is simple:

new SK.UI.ToolbarManager( _$('element') );

 

This will generate an empty Toolbar with the following HTML ( replacing everything that was previously inside the placeholder ):

<div id="element" class="horizontal">
   <div class="sk-toolbar-region home"></div>
   <div class="sk-toolbar-region center"></div>
   <div class="sk-toolbar-region end"></div>
</div>

 

Now you can add new items to the Toolbar.

my_toolbar.addItem('my_button', this, {
   caption     : 'My Button',
   event       : 'customeventname',
   'class'       : 'btn-normal btn-secondary btn-icon btn-icon-preview',
   'region'     : 'end'
});

 

The button will appear in the end region and will have 'customeventname' as a click handler. If you want to add a dropdown button just specify a handler option with the appropriate constructor name and add a content option.

my_toolbar.addItem('my_dropdown_button', this, {
   caption     : 'Dropdown',
   'class'        : 'btn-primary btn-icon btn-icon-globe',
   handler     : SK.UI.Button.Dropdown,
   content     : // content to be displayed in the dropdown
});

This will add a green dropdown button to the 'home' region (because of not specifying a region).