Context Menu with Icon

Paste the following code into the head section of your site’s HTML.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5core/master/dist/ax5core.min.js"></script>

<link rel="stylesheet" type="text/css" href="src/lib/font-awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="src/ax5ui-menu/dist/ax5menu.css">
<script type="text/javascript" src="src/ax5ui-menu/dist/ax5menu.js"></script>

Recommand use font-icon, These days, you can download the font-icon in many service.

HTML

<div style="height:200px;background: #9aa9c7;padding: 10px;" id="context-menu-target">
    Right click on the mouse.
</div>

JS

<script type="text/javascript">
    var menu;
    $(document.body).ready(function () {
        menu = new ax5.ui.menu({
            position: "absolute", // default position is "fixed"
            icons: {
                'arrow': '<i class="fa fa-caret-right"></i>'
            },
            itemClickAndClose: false,
            items: [
                {
                    icon: '<i class="fa fa-comment"></i>',
                    label: "Menu Select A-0",
                    check: {type: 'checkbox', name: 'A', value: '0', checked: false}
                },
                {
                    icon: '<i class="fa fa-comments"></i>',
                    label: "Menu Select A-1",
                    check: {type: 'checkbox', name: 'A', value: '1', checked: false}
                },
                {divide: true},
                {
                    icon: '<i class="fa fa-mars"></i>',
                    label: "Menu Select SEX-M",
                    check: {type: 'radio', name: 'sex', value: 'male', checked: true}
                },
                {
                    icon: '<i class="fa fa-venus"></i>',
                    label: "Menu Select SEX-F",
                    check: {type: 'radio', name: 'sex', value: 'female', checked: false}
                },
                {divide: true},
                {
                    html: function () {
                        // console.log(this);
                        return '<div style="text-align: center;">' +
                                '<button class="btn btn-primary btn-xs" data-menu-btn="OK">OK</button> ' +
                                '<button class="btn btn-danger btn-xs" data-menu-btn="CANCEL">CANCEL</button>' +
                                '</div>';
                    }
                }
            ]
        });

        menu.onStateChanged = function () {
            console.log(this);
        };
        menu.onLoad = function(){
            var self = this.self;
            if (!this.element) return this;
            $(this.element).find('[data-menu-btn]').click(function () {
                var act = this.getAttribute("data-menu-btn");
                if (act == 'OK') {
                    console.log(self.getCheckValue());
                }
                self.close();
            });
        };

        $("#context-menu-target").bind("contextmenu", function (e) {
            menu.popup(e);
            ax5.util.stopEvent(e);
            // e || {left: 'Number', top: 'Number', direction: '', width: 'Number'}
        });
    });
</script>