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)
- css/style.css
- /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).