dijit.Toolbar

Contents

• dijit.Toolbar
  • Programatic 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>

<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>

<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>

<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>

<!-- 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>

<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>

<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>

Table of Contents

• dijit.Toolbar
  • Programatic Toolbar