Create simple and effective toolbar with Toolbar.js

Today’s we are talking about a simple but effect jQuery plugin: toolbar.js; This plugin helps you to quickly create a tooltip style toolbar for your web application or website; toolbar.js is using twitter bootstrap icons to display toolbar icons which is cross-browser compatible as well.

How to user toolbar.js?

It is very easy to implement into your web application, take a look on the HTML code:

toolbar.js

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

 

make sure, don’t forget to implement jQuery.js and your toolbar.js plug-in respectively before your body tag start. After implement this library user the following code under script tags:

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

 

How to get toolbar.js plug-in?

I hope your all enjoy this effective plugin, click on the download here link to download this plug-in, and also with there documentation to use with different styles and to implement different customization.

Posted by Jogesh Sharma

Jogesh Sharma is a web developer and blogger who loves all the things design and the technology, He love all the things having to do with PHP, WordPress, Joomla, Magento, Durpal, Codeigniter, jQuery, HTML5 etc. He is the author of this blog.