JxLib Toolbar demo

by jonlb

HTML

<script src="http://jxlib.org/reference/3.1.1/examples/lib/jxlib.standalone.uncompressed.js"></script>
<script src="http://jxlib.org/reference/3.1.1/examples/js/locale.js"></script>
<link rel="stylesheet" href="http://jxlib.org/reference/3.1.1/examples/lib/themes/crispin/jxtheme.uncompressed.css">
<link rel="stylesheet" href="http://jxlib.org/reference/3.1.1/examples/css/tests.css">
<div id="toolbarMenu" class="toolbarBox"></div>

JavaScript

function menuToolbar() {
    /* a set of grouped menu items */
    var justifyLeft = new Jx.Menu.Item({
        label: {set:'Examples',key:'menu',value:'left'},
        toggle: true,
        imageClass: 'format-justify-left',
        image: 'http://jxlib.org/reference/3.1.1/examples/images/file-edit-menu.png'
    });
    var justifyCenter = new Jx.Menu.Item({
        label: {set:'Examples',key:'menu',value:'center'},
        toggle: true,
        imageClass: 'format-justify-center',
        image: 'http://jxlib.org/reference/3.1.1/examples/images/file-edit-menu.png'
    });
    var justifyRight = new Jx.Menu.Item({
        label: {set:'Examples',key:'menu',value:'right'},
        toggle: true,
        imageClass: 'format-justify-right',
        image: 'http://jxlib.org/reference/3.1.1/examples/images/file-edit-menu.png'
    });
    var justifyFill = new Jx.Menu.Item({
        label: {set:'Examples',key:'menu',value:'fill'},
        toggle: true,
        imageClass: 'format-justify-fill',
        image: 'http://jxlib.org/reference/3.1.1/examples/images/file-edit-menu.png'
    });
    new Jx.ButtonSet().add(
        justifyLeft, justifyCenter, justifyRight, justifyFill
    );
    
    /* menus in toolbars work pretty much the same way as menu
     * buttons
     */
    new Jx.Toolbar({parent: 'toolbarMenu'}).add(
        new Jx.Menu({label: {set:'Examples',key:'menu',value:'file'}}).add([
            new Jx.Menu.Item({
                label: {set:'Examples',key:'menu',value:'new'},
                imageClass: 'file-new',
                image: 'http://jxlib.org/reference/3.1.1/examples/images/file-edit-menu.png'}),
            new Jx.Menu.Item({
                label: {set:'Examples',key:'menu',value:'open'},
                imageClass: 'file-open',
                image: 'http://jxlib.org/reference/3.1.1/examples/images/file-edit-menu.png'}),
            new Jx.Menu.Item({
                label: {set:'Examples',key:'menu',value:'save'},
                imageClass:...