Toolbar: Overview | JavaScript UI

Toolbar Overview

The w2toolbar object allows you to create toolbars with various buttons and drop down menus. This toolbar object is used in the grid for its toolbar. It allows you do define simple buttons, radio buttons, check buttons, menus and drop down with user defined HTML.

Example

Below is a simple example how to use the toolbar. It shows the minimum HTML and JavaScript you need to render the toolbar.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css"
        href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
    <div id="toolbar" style="height: 400px"></div>
</body>
<script type="module">
import { w2toolbar } from 'https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.es6.min.js'
let toolbar = new w2toolbar({
    name : 'myToolbar',
    items: [
        { type: 'check',  id: 'item1', text: 'Check', img: 'icon-add', checked: true },
        { type: 'break' },
        { type: 'menu',   id: 'item2', text: 'Drop Down', img: 'icon-folder',
            items: [
                { text: 'Item 1', img: 'icon-page' },
                { text: 'Item 2', img: 'icon-page' },
                { text: 'Item 3', img: 'icon-page' }
            ]
        },
        { type: 'break' },
        { type: 'radio',  id: 'item3',  group: '1', text: 'Radio 1', img: 'icon-page' },
        { type: 'radio',  id: 'item4',  group: '1', text: 'Radio 2', img: 'icon-page' },
        { type: 'spacer' },
        { type: 'button',  id: 'item5',  text: 'Item 5', img: 'icon-save' }
    ]
})
toolbar.render("#toolbar")
</script>
</html>

​x
 
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css"
        href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
    <div id="toolbar" style="height: 400px"></div>
</body>
<script type="module">
import { w2toolbar } from 'https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.es6.min.js'
let toolbar = new w2toolbar({
    name : 'myToolbar',
    items: [
        { type: 'check',  id: 'item1', text: 'Check', img: 'icon-add', checked: true },
        { type: 'break' },
        { type: 'menu',   id: 'item2', text: 'Drop Down', img: 'icon-folder',
            items: [
                { text: 'Item 1', img: 'icon-page' },
                { text: 'Item 2', img: 'icon-page' },
                { text: 'Item 3', img: 'icon-page' }
            ]
        },
        { type: 'break' },
        { type: 'radio',  id: 'item3',  group: '1', text: 'Radio 1', img: 'icon-page' },
        { type: 'radio',  id: 'item4',  group: '1', text: 'Radio 2', img: 'icon-page' },
        { type: 'spacer' },
        { type: 'button',  id: 'item5',  text: 'Item 5', img: 'icon-save' }
    ]
})
toolbar.render("#toolbar")
</script>
</html>
​

Toolbar Overview

Example

User Comments