.. _dijit/Toolbar:
=============
dijit/Toolbar
=============
:Project owner: Bill Keese
:since: V?
.. contents ::
:depth: 2
Introduction
============
Just as dijit.DropDownMenu is a container for dijit.MenuItem's, so dijit.Toolbar is a container for buttons.
Any button-based Dijit component can be placed on the toolbar, including ComboButtons and DropdownButtons.
Examples
========
Programmatic example
--------------------
In this example, we borrow some of the toolbar buttons from the Editor.
.. code-example ::
:djConfig: async: true
.. js ::
require([
"dijit/Toolbar",
"dijit/form/Button",
"dojo/_base/array",
"dojo/domReady!"
], function(Toolbar, Button, array){
var toolbar = new Toolbar({}, "toolbar");
array.forEach(["Cut", "Copy", "Paste"], function(label){
var button = new Button({
// note: should always specify a label, for accessibility reasons.
// Just set showLabel=false if you don't want it to be displayed normally
label: label,
showLabel: false,
iconClass: "dijitEditorIcon dijitEditorIcon"+label
});
toolbar.addChild(button);
});
});
.. html ::
Note that iconClass is a CSS class that's been defined by the theme, see :ref:`Themes ` for details.
Declarative example
-------------------
Creation from markup is even easier.
.. code-example ::
:djConfig: async: true, parseOnLoad: true
.. js ::
require(["dojo/parser", "dijit/Toolbar", "dijit/form/Button", "dijit/form/ToggleButton", "dijit/ToolbarSeparator"]);
.. html ::
Drop Downs
==========
By using :ref:`dijit/form/DropDownButton ` and :ref:`dijit/form/ComboButton ` you can make a toolbar with drop downs.
.. code-example ::
:djConfig: async: true, parseOnLoad: true
.. js ::
require(["dojo/parser", "dijit/Toolbar", "dijit/form/DropDownButton", "dijit/ColorPalette", "dijit/TooltipDialog", "dijit/form/TextBox"]);
.. html ::
(The icons are no good but hopefully convey the idea.)
Accessibility
=============
Note the use of showLabel="false" above.
We've specified a label but then hidden it.
This is important for accessibility reasons, so that users that can't see the icon still know what the button does.
Keyboard
--------
=========================================== ==========================
Action Key
=========================================== ==========================
Move focus between widgets in the toolbar Left and right arrow keys
=========================================== ==========================
Known Issues
------------
In high contrast mode when a toggle button is checked an html entity character (✓) is displayed
since the CSS background image icon for the checked state is no longer visible.
When the toggle button is part of a toolbar the checkmark character does not display properly in IE6.
In IE6 with high contrast mode turned on, a checked toggle button in a toolbar displays as two vertical bars rather than the checkmark character.
See also
========
* :ref:`dijit/MenuBar `