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.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>
Error in the documentation? Can’t find what you are looking for? Let us know!