# Yahoo! UI Library

### editor 2.8.1

Yahoo! UI Library > editor > YAHOO.widget.Toolbar
Search:
Filters Show Private Show Protected Show Deprecated

## Class YAHOO.widget.Toolbar - extends YAHOO.util.Element

Provides a rich toolbar widget based on the button and menu widgets

### Constructor

YAHOO.widget.Toolbar `( el , attrs )`

Parameters:
  `el <String/HTMLElement>` The element to turn into a toolbar.
  `attrs <Object>` Object liternal containing configuration parameters.

### Properties

#### _buttonGroupList - `protected Array`

Internal property list of current button groups in the toolbar

#### _buttonList - `protected Array`

Internal property list of current buttons in the toolbar

#### _colorData - `Object`

Object reference containing colors hex and text values.

#### _colorPicker - `HTMLElement`

The HTML Element containing the colorPicker

#### _configuredButtons - `protected Array`

#### _keyNav - `private Boolean`

Flag to determine if the arrow nav listeners have been attached

#### _navCounter - `private Number`

Internal counter for walking the buttons in the toolbar with the arrow keys

#### _sep - `protected HTMLElement`

Internal reference to the separator HTML Element for cloning

#### _sepCount - `protected Number`

Internal refernce for counting separators, so we can give them a useful class name for styling

#### _titlebar - `HTMLElement`

Object reference to the titlebar

#### _toolbarConfigs - `protected Object`

#### browser - `Object`

Standard browser detection

#### buttonType - `Object`

The default button to use

#### CLASS_CONTAINER - `protected String`

Default CSS class to apply to the toolbar container element

#### CLASS_DISABLED - `protected String`

Default CSS class to apply when the toolbar is disabled

#### CLASS_DRAGHANDLE - `protected String`

Default CSS class to apply to the toolbar's drag handle element

#### CLASS_PREFIX - `protected String`

Default prefix for dynamically created class names

#### CLASS_SEPARATOR - `protected String`

Default CSS class to apply to all separators in the toolbar

#### dd - `Object`

The DragDrop instance associated with the Toolbar

#### draghandle - `protected HTMLElement`

#### STR_COLLAPSE - `String`

String for Toolbar Collapse Button

#### STR_EXPAND - `String`

String for Toolbar Collapse Button - Expand

#### STR_SPIN_DOWN - `String`

String for spinbutton down

#### STR_SPIN_LABEL - `String`

String for spinbutton dynamic label. Note the {VALUE} will be replaced with YAHOO.lang.substitute

#### STR_SPIN_UP - `String`

String for spinbutton up

#### Properties inherited from YAHOO.util.Element:

`DOM_EVENTS`

#### Properties inherited from YAHOO.util.AttributeProvider:

`_configs`

#### Properties inherited from YAHOO.util.EventProvider:

`__yui_events, __yui_subscribers`

### Methods

#### _addMenuClasses

`private void _addMenuClasses ( ev , na , o )`
This method is called from Menu's renderEvent to add a few more classes to the menu items

Parameters:
  `ev <String>` The event that fired.
  `na <Array>` Array of event information.
  `o <Object>` Button config object.

#### _buttonClick

`protected void _buttonClick ( ev , info )`
Click handler for all buttons in the toolbar.

Parameters:
  `ev <String>` The event that was passed in.
  `info <Object>` Object literal of information about the button that was clicked.

#### _createColorPicker

`private void _createColorPicker ( id )`
Creates the core DOM reference to the color picker menu item.

Parameters:
  `id <String>` the id of the toolbar to prefix this DOM container with.

#### _handleFocus

`private void _handleFocus ( )`
Sets up the listeners for the arrow key navigation

#### _makeColorButton

`private void _makeColorButton ( _oButton )`
Called to turn a "color" button into a menu button with an Overlay for the menu.

Parameters:
  `_oButton <Object>` YAHOO.widget.ToolbarButton reference

#### _makeSpinButton

`private void _makeSpinButton ( _button , oButton )`
Create a button similar to an OS Spin button.. It has an up/down arrow combo to scroll through a range of int values.

Parameters:
  `_button <Object>` YAHOO.widget.ToolbarButton reference
  `oButton <Object>` Object literal containing the buttons initial config

#### _navigateButtons

`private void _navigateButtons ( ev )`
Handles the navigation/focus of toolbar buttons with the Arrow Keys

Parameters:
  `ev <Event>` The Key Event

#### _resetColorPicker

`private void _resetColorPicker ( )`
Clears the currently selected color or mouseover color in the color picker.

#### addButton

`void addButton ( oButton , after )`
Add a new button to the toolbar. Buttons supported: push, split, menu, select, color, spin

Parameters:
  `oButton <Object>` Object literal reference to the Button's Config
  `after <HTMLElement>` Optional HTML element to insert this button after in the DOM.

#### addButtonGroup

`void addButtonGroup ( oGroup )`
Add a new button group to the toolbar. (uses addButton)

Parameters:
  `oGroup <Object>` Object literal reference to the Groups Config (contains an array of button configs as well as the group label)

#### addButtonToGroup

`void addButtonToGroup ( oButton , group , after )`
Add a new button to a toolbar group. Buttons supported: push, split, menu, select, color, spin

Parameters:
  `oButton <Object>` Object literal reference to the Button's Config
  `group <String>` The Group identifier passed into the initial config
  `after <HTMLElement>` Optional HTML element to insert this button after in the DOM.

#### addSeparator

`void addSeparator ( cont , after )`
Add a new button separator to the toolbar.

Parameters:
  `cont <HTMLElement>` Optional HTML element to insert this button into.
  `after <HTMLElement>` Optional HTML element to insert this button after in the DOM.

#### collapse

`void collapse ( collapse )`
Programatically collapse the toolbar.

Parameters:
  `collapse <Boolean>` True to collapse, false to expand.

#### deselectAllButtons

`Boolean deselectAllButtons ( )`
Deselects all buttons in the toolbar.

#### deselectButton

`Boolean deselectButton ( id )`
Deselects a button in the toolbar.

Parameters:
  `id <String/Number>` Deselect a button by it's id, index or value.

#### destroy

`Boolean destroy ( )`
Destroys the toolbar, all of it's elements and objects.

#### destroyButton

`Boolean destroyButton ( id )`
Destroy a button in the toolbar.

Parameters:
  `id <String/Number>` Destroy a button by it's id or index.

#### disableAllButtons

`Boolean disableAllButtons ( )`
Disables all buttons in the toolbar.

#### disableButton

`Boolean disableButton ( id )`
Disables a button in the toolbar.

Parameters:
  `id <String/Number>` Disable a button by it's id, index or value.

#### enableAllButtons

`Boolean enableAllButtons ( )`
Enables all buttons in the toolbar.

#### enableButton

`Boolean enableButton ( id )`
Enables a button in the toolbar.

Parameters:
  `id <String/Number>` Enable a button by it's id, index or value.

#### getButtonById

`YAHOO.widget.ToolbarButton getButtonById ( id )`
Gets a button instance from the toolbar by is Dom id.

Parameters:
  `id <String>` The Dom id to query for.

#### getButtonByIndex

`YAHOO.widget.ToolbarButton getButtonByIndex ( index )`
Gets a button instance from the toolbar by is index in _buttonList.

Parameters:
  `index <Number>` The index of the button in _buttonList.

#### getButtonByValue

`YAHOO.widget.ToolbarButton or YAHOO.widget.MenuItem getButtonByValue ( value )`
Gets a button instance or a menuitem instance from the toolbar by it's value.

Parameters:
  `value <String>` The button value to query for.

#### getButtons

`Array getButtons ( )`
Returns an array of buttons in the current toolbar

#### init

`void init ( )`
The Toolbar class's initialization method

#### initAttributes

`void initAttributes ( attr )`
Initializes all of the configuration attributes used to create the toolbar.

Parameters:
  `attr <Object>` Object literal specifying a set of configuration attributes used to create the toolbar.

#### isSelected

`Boolean isSelected ( id )`
Tells if a button is selected or not.

Parameters:
  `id <String/Number>` A button by it's id, index or value.

#### resetAllButtons

`Boolean resetAllButtons ( _ex )`
Resets all buttons to their initial state.

Parameters:
  `_ex <Object>` Except these buttons

#### selectButton

`Boolean selectButton ( id , value )`
Selects a button in the toolbar.

Parameters:
  `id <String/Number>` Select a button by it's id, index or value.
  `value <String>` If this is a Menu Button, check this item in the menu

#### toString

`String toString ( )`
Returns a string representing the toolbar.

#### Methods inherited from YAHOO.util.Element:

`_setHTMLAttrConfig, addClass, addListener, appendChild, appendTo, delegate, fireQueue, getElementsByClassName, getElementsByTagName, getStyle, hasChildNodes, hasClass, initAttributes, insertBefore, on, removeChild, removeClass, removeDelegate, removeListener, replaceChild, replaceClass, setStyle, subscribe`

#### Methods inherited from YAHOO.util.AttributeProvider:

`configureAttribute, fireBeforeChangeEvent, fireChangeEvent, get, getAttributeConfig, getAttributeKeys, refresh, register, resetAttributeConfig, resetValue, set, setAttributeConfig, setAttributes`

#### Methods inherited from YAHOO.util.EventProvider:

`createEvent, fireEvent, hasEvent, subscribe, unsubscribe, unsubscribeAll`

### Events

#### beforeButtonsChange

`beforeButtonsChange ( event )`
Fires before the value for the configuration attribute 'buttons' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeButtonTypeChange

`beforeButtonTypeChange ( event )`
Fires before the value for the configuration attribute 'buttonType' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeCollapseChange

`beforeCollapseChange ( event )`
Fires before the value for the configuration attribute 'collapse' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeDisabledChange

`beforeDisabledChange ( event )`
Fires before the value for the configuration attribute 'disabled' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeDraggableChange

`beforeDraggableChange ( event )`
Fires before the value for the configuration attribute 'draggable' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeGrouplabelsChange

`beforeGrouplabelsChange ( event )`
Fires before the value for the configuration attribute 'grouplabels' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeTitlebarChange

`beforeTitlebarChange ( event )`
Fires before the value for the configuration attribute 'titlebar' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### buttonClick

`buttonClick ( o )`
Fires when any botton receives a click event. Passes back a single object representing the buttons config object. See Element.addListener for more information on listening for this event.

Parameters:
  `o <Object>` The object passed to this handler is the button config used to create the button.

#### buttonsChange

`buttonsChange ( event )`
Fires when the value for the configuration attribute 'buttons' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### buttonTypeChange

`buttonTypeChange ( event )`
Fires when the value for the configuration attribute 'buttonType' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### collapseChange

`collapseChange ( event )`
Fires when the value for the configuration attribute 'collapse' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### disabledChange

`disabledChange ( event )`
Fires when the value for the configuration attribute 'disabled' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### draggableChange

`draggableChange ( event )`
Fires when the value for the configuration attribute 'draggable' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### grouplabelsChange

`grouplabelsChange ( event )`
Fires when the value for the configuration attribute 'grouplabels' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### titlebarChange

`titlebarChange ( event )`
Fires when the value for the configuration attribute 'titlebar' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### toolbarCollapsed

`toolbarCollapsed ( )`
Fires when the toolbar is collapsed via the collapse button. See Element.addListener for more information on listening for this event.

#### toolbarExpanded

`toolbarExpanded ( )`
Fires when the toolbar is expanded via the collapse button. See Element.addListener for more information on listening for this event.

#### valueClick

`valueClick ( o )`
This is a special dynamic event that is created and dispatched based on the value property of the button config. See Element.addListener for more information on listening for this event. Example: `

    buttons : [
    { type: 'button', value: 'test', value: 'testButton' }
    ]

` With the valueClick event you could subscribe to this buttons click event with this: tbar.in('testButtonClick', function() { alert('test button clicked'); })

Parameters:
  `o <Object>` The object passed to this handler is the button config used to create the button.

#### Events inherited from YAHOO.util.Element:

`appendTo, available, beforeAppendTo, beforeElementChange, contentReady, elementChange,`

### Configuration Attributes

#### buttons `- Array`

Object specifying the buttons to include in the toolbar Example: `

    {
    { id: 'b3', type: 'button', label: 'Underline', value: 'underline' },
    { type: 'separator' },
    { id: 'b4', type: 'menu', label: 'Align', value: 'align',
    menu: [
    { text: "Left", value: 'alignleft' },
    { text: "Center", value: 'aligncenter' },
    { text: "Right", value: 'alignright' }
    ]
    }
    }

`

#### buttonType `- String`

The buttonType to use (advanced or basic)

#### collapse `- Boolean`

Boolean indicating if the the titlebar should have a collapse button. The collapse button will not remove the toolbar, it will minimize it to the titlebar
Default Value: false

#### cont `- HTMLElement`

The container for the toolbar.

#### disabled `- Boolean`

Boolean indicating if the toolbar should be disabled. It will also disable the draggable attribute if it is on.
Default Value: false

#### draggable `- Boolean`

Boolean indicating if the toolbar should be draggable.
Default Value: false

#### grouplabels `- Boolean`

Boolean indicating if the toolbar should show the group label's text string.
Default Value: true

#### titlebar `- Boolean or String`

Boolean indicating if the toolbar should have a titlebar. If passed a string, it will use that as the titlebar text
Default Value: false

#### Configuration attributes inherited from YAHOO.util.Element:

`element`

Copyright © 2010 Yahoo! Inc. All rights reserved.