dijit.Toolbar¶
Status: | Draft |
---|---|
Version: | 1.2 |
Authors: | Bill Keese |
Just as dijit.Menu 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.
Programatic Toolbar¶
In this example, we borrow some of the toolbar buttons from the Editor.
<script type="text/javascript"> dojo.require("dijit.Toolbar"); dojo.require("dijit.form.Button"); var toolbar; dojo.addOnLoad(function(){ toolbar = new dijit.Toolbar({}, "toolbar"); dojo.forEach(["Cut", "Copy", "Paste"], function(label){ var button = new dijit.form.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); }); }); </script>
<span id="toolbar"></span>
Note that iconClass is a CSS class that’s been defined by the theme, see Themes for details.
Markup¶
Creation from markup is even easier.
<script type="text/javascript"> dojo.require("dijit.Toolbar"); dojo.require("dijit.form.Button"); </script>
<!-- Tags end on line afterwards to eliminate any whitespace --> <div id="toolbar1" dojoType="dijit.Toolbar" ><div dojoType="dijit.form.Button" id="toolbar1.cut" iconClass="dijitEditorIcon dijitEditorIconCut" showLabel="false">Cut</div ><div dojoType="dijit.form.Button" id="toolbar1.copy" iconClass="dijitEditorIcon dijitEditorIconCopy" showLabel="false">Copy</div ><div dojoType="dijit.form.Button" id="toolbar1.paste" iconClass="dijitEditorIcon dijitEditorIconPaste" showLabel="false">Paste</div ><!-- The following adds a line between toolbar sections --><span dojoType="dijit.ToolbarSeparator"></span ><div dojoType="dijit.form.ToggleButton" id="toolbar1.bold" iconClass="dijitEditorIcon dijitEditorIconBold" showLabel="false">Bold</div> </div>
Drop Downs¶
By using dijit.form.DropDownButton and dijit.form.ComboButton you can make a toolbar with drop downs.
<script type="text/javascript"> dojo.require("dijit.Toolbar"); dojo.require("dijit.form.DropDownButton"); dojo.require("dijit.ColorPalette"); dojo.require("dijit.TooltipDialog"); dojo.require("dijit.form.TextBox"); </script>
<div id="fancy" dojoType="dijit.Toolbar"> <div dojoType="dijit.form.DropDownButton" iconClass="dijitEditorIcon dijitEditorIconBold" showLabel="false"> <span>Color</span> <div dojoType="dijit.ColorPalette"></div> </div> <div dojoType="dijit.form.DropDownButton" iconClass="dijitEditorIcon dijitEditorIconItalic" showLabel="false"> <span>Dialog</span> <div dojoType="dijit.TooltipDialog"> <label for="first">First name:</label> <input dojoType="dijit.form.TextBox" name="first" id="first"/> <br/> <label for="last">Last name:</label> <input dojoType="dijit.form.TextBox" name="last" id="last"/> </div> </div> </div>
(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.
Known Issues¶
In hign contrast mode when a toggle button is checked an html entity charcter (✓) 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.