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:

The particular icon is selected using the attribute "iconClass". The Cut button with class "dijitEditorIconCut" has the following definition in Tundra.css:
/* 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.
- Printer-friendly version
- Login or register to post comments
- Unsubscribe post
Programmatic Toolbar creation/
Can someone provide code on how to create a toolbar in javascript?
With 0.9.0 I've been able to create a toolbar object that firefox will accept (IE bombs) however it doesn't work in 1.0.0
In 0.9.0 this works with firefox
parentNode = dojo.byId('barParent');
var barDiv = document.createElement ("div");
var attachedBarDiv = parentNode.appendChild(barDiv);
var adBar = dijit.Toolbar ({},attachedBarDiv);
Shouldn't this be as simple as? (It evidentially isn't so don't try this in your code)
var adBar = dijit.Toolbar();
if (parentNode.addChild){parentNode.addChild(adBar);}
else{parentNode.appendChild(adBar);};
Is it CDN?