Toolbar
The Toolbar is another
familiar control that abbreviates the common task of providing a
collection of common commands to the user. In short, the Toolbar does nothing more than house a
collection of Button dijits, which
when styled appropriately, can be very aesthetically pleasing. The
various prepackaged themes that come with Dijit contain classes for
many of the common operations such as cut/paste, bold/italic, etc.,
which you can provide through Button 's iconClass attribute.
The following listing illustrates placing a Toolbar on the page and then systematically
wires up each of its buttons to a custom event handler.
Tip
This particular example attempts to automate the methodology
for hooking up buttons and custom handlers. Note that the
peculiarity of connecting to x.parentNode inside of the forEach block instead of just connecting
to x is related to the way that
Button is implemented. As it
turns out, the icon overlay is what contains an icon node that
actually receives the click; you could have debugged this by
inspecting with Firebug.
<html> <head> <title>Fun with Toolbar!</title> <link rel="stylesheet" type="text/css" href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css" /> <link rel="stylesheet" type="text/css" href="http://o.aolcdn.com/dojo/1.1/dijit/themes/tundra/tundra.css" /> <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js" djConfig="parseOnLoad:true,isDebug:true"> </script> <script type="text/javascript"> dojo.require("dojo.parser"); ...Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access