Fork me on GitHub

Toolbar.Js

A jQuery plugin that creates tooltip style toolbars.



Toolbar allows you to quickly create tooltip style toolbars for use in web applications and websites. The toolbar is easily customisable using the twitter bootstrap icons and provides flexability around the toolbars display and number of icons.

Download

Features

Examples

Horizontal toolbar (top)

JS
$('#user-toolbar').toolbar({
	content: '#user-toolbar-options', 
	position: 'top'
});
HTML
<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>	

Horizontal toolbar (bottom)

JS
$('#user-toolbar').toolbar({
	content: '#user-toolbar-options', 
	position: 'bottom'
});
HTML
<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>	

Horizontal toolbar with three items

JS
$('#format-toolbar').toolbar({
	content: '#format-toolbar-options', 
	position: 'top',
	hideOnClick: true
});
HTML
<div id="format-toolbar-options">
	<a href="#"><i class="icon-align-left"></i></a>
	<a href="#"><i class="icon-align-center"></i></a>
	<a href="#"><i class="icon-align-right"></i></a>
</div>	

Vertical toolbar (left)

JS
$('#vertical-toolbar').toolbar({
	content: '#user-toolbar-options', 
	position: 'left'
});
HTML
<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>	

Vertical toolbar (right)

JS
$('#vertical-toolbar').toolbar({
	content: '#user-toolbar-options', 
	position: 'right'
});
HTML
<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>	

Horizontal toolbar triggered by a link

Options
JS
$('#normal-button').toolbar({
	content: '#user-options', 
	position: 'top'
});
HTML
<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>	

Usage

Include the plugin javascript file along with jquery
<script src="jquery.min.js"></script>
<script src="jquery.toolbar.js"></script>

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

Define your toolbar HTML
<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>	

Attach the toolbar to an element passing in your options as an object. Available options are detailed below.
$('#element').toolbar( options );

Notes

Options

Option Description
content The id of the element containing the icons HTML.
position Indicates the display position of the toobar relative to the element its attached agaisnt. Select either 'top', 'bottom', 'left' or 'right. Default: top.
hideOnClick Choose if you want the toolbar to hide when anywhere outside the toolbar is clicked. Default: false.

Methods

Below is a list of methods available on the elements that already have a toolbar instantiated

Method Arguments Description
getToolbarElement None Obtain the element that wraps every tool button

Events

Below are a list of events that are triggered when certain events happen with the toolbar. You can listen for these events using the .on method.

For example.
$('#element').on('toolbarShown',
	function( event ) {
		// this: the element the toolbar is attached to
	}
);

Event Description
toolbarShown Triggered when the toolbar is shown.
toolbarHidden Triggered when the toolbar is hidden.
toolbarItemClick Triggered when a button in the toolbar is clicked. The toolbar item clicked is also passed through for this event.