Documentation
dijit.Toolbar¶
Contents
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.Menu"); 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">toolbar will show up here</span>
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>
Here’s a Toolbar that looks like a MenuBar. We haven’t implemented a MenuBar for dijit yet so some people use the Toolbar as a poor-man’s substitute.
<script type="text/javascript"> dojo.require("dijit.Toolbar"); dojo.require("dijit.form.Button"); </script>
<div id="menubar" dojoType="dijit.Toolbar" class="menuBar"> <div dojoType="dijit.form.DropDownButton"> <span>File</span> <div dojoType="dijit.Menu"> <div dojoType="dijit.MenuItem">New</div> <div dojoType="dijit.MenuItem">Open</div> <div dojoType="dijit.MenuSeparator"></div> <div dojoType="dijit.MenuItem" iconClass="dijitEditorIconSave">Save</div> <div dojoType="dijit.MenuItem">Save As...</div> </div> </div>