Toolbar.js for jQuery and Bootstrap: Flexible Toolbars in iOS Style

No matter whether you like the design style of iOS or you don't. We need not participate in the ongoing discussion about sceuomorphism. One topic cannot be disputed. I'm talking about the toolbar design Apple's iOS introduced. Modern websites tend to adapt that concept more often than not. Tapping an icon or a link unveils more options. This is space-saving and an established implementation by now. The jQuery plugin Toolbar.js, created by Paul Kinzett from New Zealand, allows for iOS-style toolbars on any website. The tool is dead-simple to integrate.

Toolbars with Glyphicons from Twitter's Bootstrap

Toolbar.js for jQuery offers a very simple, yet decent possibility of creating toolbars to attach to any element as well horizontally as vertically. An unlimited number of toolbar could be inserted that way. Kinzett chose to use the icon set, that Twitter's Bootstrap utilizes and also sticks to the corresponding CSS. That way he maintains their responsiveness and allows for easy manipulation using established Bootstrap methods.

With hundreds of symbols at hand, even the most sophisticated toolbar should be possible. jQuery enthusiasts will feel at home immediately. As always, first thing to do is integrate the JavaScript:

Then it is time to position the stylesheets for the toolbars and for the Bootstrap icons:

After that step you will want to define the toolbar itself, which could look like this:

You see, that the icons are called via their respective classes from Bootstrap. The actions, that you want to be linked to the individual icon, have to be called via the element A. The last task to perform is the connection of the toolbar to the element, you want to trigger it.

 $('#element').toolbar( options ); 

Options are the position of the bar, which can be above or below as well as left or right from the element, where above and below show a horizontal bar, while left or right lead to a vertical look.

This definition:

$('#vertical-toolbar').toolbar({
    content: '#user-toolbar-options', 
    position: 'right'
}); 

leads to this visual presentation:

While this definition:

$('#user-toolbar').toolbar({
    content: '#user-toolbar-options', 
    position: 'top'
}); 

lets your toolbar look like this:

PIC_HORZ

The number of icons is only limited by your own reflection as to their reasonableness ;-)

Toolbar.js can be downloaded from Github. It is MIT licensed and can be used in private and commercial projects.

Related Links:

• Toolbar.js - Github Repository
• Projectsite wit Docs and Demo - Toolbar.js
• Glyphicons - Icons used in Bootstrap
• Bootstrap - Twitters Github Repository