Advanced Toolbar

There are 7 types of items that can be created in the toolbar: Below you can see a toolbar with all types of items. This demo also shows how to add simple event listener to listen to all events.
$(function () { $('#toolbar').w2toolbar({ name: 'toolbar', items: [ { type: 'check', id: 'item1', caption: 'Check', icon: 'fa-check', checked: true }, { type: 'break', id: 'break0' }, { type: 'menu', id: 'item2', caption: 'Menu', icon: 'fa-table', items: [ { text: 'Item 1', icon: 'fa-camera' }, { text: 'Item 2', icon: 'fa-picture' }, { text: 'Item 3', icon: 'fa-glass' } ]}, { type: 'break', id: 'break1' }, { type: 'radio', id: 'item3', group: '1', caption: 'Radio 1', icon: 'fa-star', checked: true }, { type: 'radio', id: 'item4', group: '1', caption: 'Radio 2', icon: 'fa-heart' }, { type: 'break', id: 'break2' }, { type: 'drop', id: 'item5', caption: 'Drop Down', icon: 'fa-plus', html: '
Drop down
' }, { type: 'break', id: 'break3' }, { type: 'html', id: 'item6', html: '
'+ ' Input:'+ ' '+ '
' }, { type: 'spacer' }, { type: 'button', id: 'item7', caption: 'Item 5', icon: 'fa-flag' } ] }); w2ui.toolbar.on('*', function (event) { console.log('EVENT: '+ event.type + ' TARGET: '+ event.target, event); }); });