The Dojo Toolbar dijit

One of the best things about using a JavaScript framework like Dojo is getting something up and running very quickly. The dijit.Toolbar is no exception. You can get a very quick toolbar by just using the declarative method right in  your HTML. If you are using the declarative method then you need to make sure you parse the DOM on load, this is how you tell Dojo to parse on load:

http://js/dojo.xd.js

To get some cool look and feel you should then include one of the base Dojo style-sheets in your code. The easiest way to do this is just make the entire <body> use the style sheet so all sub-elements will inherit it:

<body style="margin:0px; padding:0px;">

You will also have to define in your CSS the images you want to use for the buttons (if they are icon buttons). Make sure you specify a height and width!

.iconfilm {
   background-image:url(icons/filmstrip.png) !important;
   width: 22px;
   height: 22px;
}
.iconthumb {
   background-image:url(icons/thumbnail.png) !important;
   width: 22px;
   height: 22px;
}
.iconslides {
   background-image:url(icons/slides.png) !important;
   width: 22px;
   height: 22px;
}

Lastly, you just put the code directly in your HTML. Declaring the toolbar as the outer

and then each button individually. You could also include this inside of an XPage, JSP, or PHP file and conditionally show or not each button. Notice I use a and a connectId to attach a Dojo tooltip to each icon.

iconfilm" showLabel="false">
<span id="fs_tip" dojoType="dijit.Tooltip" connectId="toolbar1.filmstrip">Film Strip</span>
iconthumb" showLabel="false">
<span id="slides_tip" dojoType="dijit.Tooltip" connectId="toolbar1.slides">Slides</span>
iconslides" showLabel="false">
<span id="thumb_tip" dojoType="dijit.Tooltip" connectId="toolbar1.thumbnail">Thumbnail</span> </div </div>

This code was taken from the Attachment Viewer project on OpenNTF. You can download the project and see how the code works. Here is a screen shot of the toolbar in the Lotus Notes client:

Make sure you check out the awesome online documentation for the dijit.Toolbar!

As for a jQuery version of Toolbar, I couldn’t find one. I did find a really nice article that shows how to create a CSS based toolbar with some cool jQuery effects. Check that out and if you find an actual toolbar plugin for jQuery let me know.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s