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] | 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:
This will generate an empty Toolbar with the following HTML ( replacing everything that was previously inside the placeholder ):
Now you can add new items to the Toolbar.
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.
This will add a green dropdown button to the 'home' region (because of not specifying a region).