<h3>Toolbar Overview</h3>
The w2toolbar object allows you to create toolbars with various buttons and drop down menues. 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.
<div style="height: 20px"></div>

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

<textarea class="html">
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.min.js"></script>
</head>
<body>
    <div id="myToolbar"></div>
</body>
<script>
$(function () {
    $('#myToolbar').w2toolbar({
        name : 'myToolbar',
        items: [
            { type: 'check',  id: 'item1', caption: 'Check', img: 'icon-add', checked: true },
            { type: 'break' },
            { type: 'menu',   id: 'item2', caption: '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', caption: 'Radio 1', img: 'icon-page' },
            { type: 'radio',  id: 'item4',  group: '1', caption: 'Radio 2', img: 'icon-page' },
            { type: 'spacer' },
            { type: 'button',  id: 'item5',  caption: 'Item 5', img: 'icon-save' }
        ]
    });
});
</script>
</html>
</textarea>