JavaScript Toolbar

Quick reference

Considering the example below:

<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<div id="toolbar"></div>

<script>
var toolbar = jSuites.toolbar(document.getElementById('toolbar'), {
    container: true,
    items:[
        {
            type: 'icon',
            content: 'save',
            onclick: function () {
                console.log('save something');
            }
        },
        {
            type: 'label',
            content: 'Text item',
            onclick: function() {
                console.log('action');
            }
        },
        {
            type: 'divisor',
        },
        {
            type: 'select',
            data: [ 'Verdana', 'Arial', 'Courier New' ],
            width: '160px',
            render: function(e) {
                return '<span style="font-family:' + e + '">' + e + '</span>';
            },
            onchange: function(a,b,c,d) {
                console.log('font-family: ' + d);
            }
        }
    ],
});
</script>
</html>

Available Methods

Method	Description
toolbar.selectItem(number)	Select one item in the toolbar
toolbar.show()	Show the toolbar
toolbar.hide()	Hide the toolbar
toolbar.setBadge(index, value)	Add a the badge value for one of the items in the toolbar
toolbar.destroy()	Destroy the toolbar

Initialiation properties

Property	Description
app: object	Link the toolbar to an jSuites app.
container: boolean	Show the toolbar container border.
badge: boolean	Add the a badge container for each toolbar element.
title: boolean	Show title below the icons.
items: Array of ToolbarItem	Items for the toolbar.

ToolbarItem properties

Property	Description
type: string	Element type: icon
content: string	Content of the toolbar element
title: boolean	Tooltip for the toolbar element
width: number	Toolbar element width
state: boolean	Add state controller to the toolbar element
active: boolean	Initial state for the toolbar element
class: string	CSS Class for each toolbar element
value: number	The initial selected option for the type: select
render: method	Render method parser for the elements in the dropdown when type: select
onclick: method	When a item is clicked
onchange: method	For the type select when a new item is selected