article:
Elements Design & Code: Message Board or Notice - PSD and HTML
article:
Elements Design: Web Banners Pack

JS Plugin: Toolbar

Advertisement

From Wikipedia: In a graphical user interface, on a computer monitor, a toolbar is a GUI widget on which on-screen buttons, icons, menus, or other input or output elements are placed. Toolbars are seen in many types of applications such as office suites, graphics editors, and web browsers. Toolbars are usually distinguished from palettes by their integration into the edges of the screen or larger windows, which results in wasted space if too many underpopulated bars are stacked atop each other (especially horizontal bars on a landscape oriented display) or interface inefficiency if overloaded bars are placed on small windows.

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.


Screenshots

toolbar - top

Resource Plugin: Toolbar

toolbar - bottom
Resource Plugin: Toolbar

toolbar - left
Resource Plugin: Toolbar

toolbar - right
Resource Plugin: Toolbar



Implementation

Header
...
<link href="css/toolbars.css" rel="stylesheet" />
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.toolbar.js"></script>
...
<script type="text/javascript">
    jQuery(document).ready(function($) {
        
        // Define any icon actions before calling the toolbar
        $('.toolbar-icons a').on('click', function( event ) {
            event.preventDefault();
        });

        $('#normal-button').toolbar({content: '#user-options', position: 'top'});
        $('#normal-button-bottom').toolbar({content: '#user-options', position: 'bottom'});
        $('#normal-button-small').toolbar({content: '#user-options-small', position: 'top', hideOnClick: true});
        $('#button-left').toolbar({content: '#user-options', position: 'left'});
        $('#button-right').toolbar({content: '#user-options', position: 'right'});
        $('#link-toolbar').toolbar({content: '#user-options', position: 'top'});

    });
</script>

Html
...
<div id="user-options" class="toolbar-icons" style="display: none;">
    <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-trash"></i></a>
    <a href="#"><i class="icon-ban-circle"></i></a>
</div>
  

Features

-Straightforward implementation with simple options
- Can run as many toolbars as required
- Toolbars can be attached to any element required
- Toobar icons are easily customised through the popular twitter bootstrap framework
- Toolbars are responsive and follow the element on resize



Options

- 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.




demo
download
github

Advertisement
Tags: toolbar javascript jquery plugin user interface gui left top bottom right web applications

Leave a Comment

No Comment

© Creative3x Ltd.