simon
/
DSDEVS-Debugger


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
							<!DOCTYPE html>
<html>
<head>
    <title>W2UI Demo: toolbar-3</title>
    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.2.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.2.min.js"></script>
</head>
<body>

<div id="toolbar" style="padding: 4px; border: 1px solid silver; border-radius: 3px"></div>

<script type="text/javascript">
$(function () {
    var btnCount = 0;
    $('#toolbar').w2toolbar({
        name: 'toolbar',
        items: [
            { type: 'button', id: 'append', caption: 'Append', icon: 'w2ui-icon-plus' },
            { type: 'button', id: 'insert', caption: 'Insert', icon: 'w2ui-icon-plus' },
            { type: 'button', id: 'delete', caption: 'Delete', icon: 'w2ui-icon-cross' },
            { type: 'break',  id: 'break0' },
            { type: 'break',  id: 'break1' }
        ],
        onClick: function (event) {
            console.log(event.target);
            switch (event.target) {
                case 'append':
                    this.add({ type: 'button', id: 'button' + btnCount, caption: 'button '+ btnCount, img: 'icon-page' });
                    btnCount++;
                    break;
                case 'insert':
                    this.insert('break1', { type: 'button', id: 'button' + btnCount, caption: 'button '+ btnCount, img: 'icon-page' });
                    btnCount++;
                    break;
                case 'delete':
                    if (btnCount <= 0) return;
                    btnCount--;
                    this.remove('button'+ btnCount);
                    break;
            }
        }
    });
});
</script>

</body>
</html>