JavaScript Toolbar

Quick reference

Considering the example below:

<html>
<script src="https://bossanova.uk/jsuites/v3/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v3/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: objectLink the toolbar to an jSuites app.
container: booleanShow the toolbar container border.
badge: booleanAdd the a badge container for each toolbar element.
title: booleanShow title below the icons.
items: Array of ToolbarItemItems for the toolbar.


ToolbarItem properties

Property Description
type: stringElement type: icon | divisor | label | select
content: stringContent of the toolbar element
title: booleanTooltip for the toolbar element
width: numberToolbar element width
state: booleanAdd state controller to the toolbar element
active: booleanInitial state for the toolbar element
class: stringCSS Class for each toolbar element
value: numberThe initial selected option for the type: select
render: methodRender method parser for the elements in the dropdown when type: select
onclick: methodWhen a item is clicked
onchange: methodFor the type select when a new item is selected