Toolbar
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.
Example
In this example, we borrow some of the toolbar buttons from the Editor
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Toolbar");
function bold() { console.debug("Bold!"); }
function cut() { console.debug("Cut!"); }
function copy() { console.debug("Copy!"); }
function paste() { console.debug("Paste!"); }
dojo.addOnLoad(function() {
dojo.connect(dojo.byId("toolbar1.bold"),"onclick",bold);
dojo.connect(dojo.byId("toolbar1.cut"),"onclick",cut);
dojo.connect(dojo.byId("toolbar1.copy"),"onclick",copy);
dojo.connect(dojo.byId("toolbar1.paste"),"onclick",paste);
});
</script>
</head>
<body class="tundra">
<!-- 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>
</body></html>
Where do the icons come from? The theme defines one large image with all the buttons. Tundra's editor button image looks like the following:
[inline:editor.gif]The particular icon is selected using the attribute "iconClass". The Cut button with class "dijitEditorIconCut" has the following definition in Tundra.css:
/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #000000; font-weight: bold;} .geshifilter .kw2 {color: #993333;} .geshifilter .co1 {color: #a1a100;} .geshifilter .coMULTI {color: #808080; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #ff0000;} .geshifilter .nu0 {color: #933;} .geshifilter .re0 {color: #cc00cc;} .geshifilter .re1 {color: #6666ff;} .geshifilter .re2 {color: #3333ff;} .geshifilter .re3 {color: #933;} .geshifilter .re4 {color: #933;}/* All of the selectors for the icons go here */
{
background-image: url('images/editor.gif'); /* mega-image */
background-repeat: no-repeat;
width: 18px;
height: 18px;
text-align: center;
}
.tundra .dijitEditorIconCut { background-position: -108px; }
The Cut icon starts 108 px from the right edge, and measures 18px by 18px. 108 equals 6 * 18, so it's the 6th image from the right. You can define your own buttons by setting up CSS selectors using code similar to the follwing, and wire up the iconClass.
|
dijit.Toolbar
Toolbar, which can be filled with ComboButton and DropDownButton instances
|
||
|
Methods
|
||
|
Methods
|
||
| addChild(/*Widget*/ child, /*Integer?*/ insertIndex) | Process the given child widget, inserting its dom node as a child of our dom node | |
| Widget[] getChildren() | returns array of children widgets | |
| removeChild(/*Widget*/ page) | removes the passed widget instance from this widget but does not destroy it | |
Accessibility (applies to version 1.0 of Toolbar)
Keyboard
| Action | Key |
|---|---|
| Move focus between widgets in the toolbar | Left and right arrow keys |
Known Issues (updatd for 1.0 - toggle buttons did not display in high contrst mode in 0.9)
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.