Toolbar.js for jQuery and Bootstrap: Flexible toolbars in iOS look

Whether you like the design style of the iOS or not does not matter here. Regardless of the current discussion about look  you will quickly achieve a consensus that the toolbar design of Apple’s mobile OS is leading the way for modern websites. A Tapp on an icon or a link often brings more choices to light. This saves space and is now established. The jQuery plugin Toolbar.js New Zealander Paul Kinzett allows use on any websites and is really extremely simple to use.


Toolbars in iOS look with the Glyphicons from Twitters Bootstrap

Toolbar.js for jQuery provides a very simple, yet very elegant way, toolbars, both vertically and horizontally to hang as to any element. Any number of these toolbars can be created SunKinzett the iconset, and the associated CSS uses of Twitter’s Bootstrap. In this way, the toolbars on the one responsive behavior, on the other hand they can be adapted to the bootstrap methods.

With hundreds of symbols is also likely the most unusual toolbars can be implemented. The procedure is known jQuery enthusiasts. First, they need to implement the JavaScript:

<script src="jquery.min.js"> </ script>
<script src="jquery.toolbar.js"> </ script>

Then we bring in the style sheets for the toolbar, such as the bootstrap icons:

href="jquery.toolbar.css" <link rel="stylesheet" />
href="bootstrap.icons.css" <link rel="stylesheet" />

Following the toolbar still must be defined. This may look like this:

<div id="user-toolbar-options">
    <a href="#"> <i class="icon-user"> </ i> </ a>
    <a href="#"> <i class="icon-star"> </ i> </ a>
    <a href="#"> <i class="icon-edit"> </ i> </ a>
    <a href="#"> <i class="icon-delete"> </ i> </ a>
    <a href="#"> <i class="icon-ban"> </ i> </ a>

You will see that the icons on the appropriate classes will be allocated from the bootstrap. The actions to be associated with it, find their appropriate place in A elements. Finally, the so-defined toolbar is attached to the item, which will be responsible for calling.

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

Options are the position of the bar, as there would be over or under the horizontal member or the left or right of the element vertically.

This definition:

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

The number of icons is only limited by their own reflections on this subject meaningfulness 😉

Toolbar.js available on Github under the liberal MIT license for use in private and commercial projects.

Subscribe and never miss a post!

Subscribe to the free newsletter now and get fresh content delivered straight into your inbox. (No spam, we promise)

Comment Policy:

Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please. You can wrap code in [lang-name][/lang-name] tags.

Tell us what you're thinking...

If you want a picture to show with your comment, then get Gravatar!