Create simple and effective toolbar with Toolbar.js

By / / Free Stuff

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.

Related posts:

  1. Simple and attractive javascript plotting chart
  2. Create 3D button with Pure CSS3
  3. Create tab using jquery and css
  4. Make effective CSS3 animation
  5. Create Simple Modal Pop-up with React
  6. Gutenberg Editor – Add Button to the Toolbar