unitmenu

Source

<!-- font-awesome -->
<link rel="stylesheet" href="css/all.css">

<!-- jquery -->
<script src="js/jquery.min.js"></script>

<!-- contextmenu -->
<link rel="stylesheet" href="css/jquery.contextMenu.min.css">
<script src="js/jquery.contextMenu.min.js"></script>
<script src="js/jquery.ui.position.js"></script>

<!-- unitmenu -->
<link rel="stylesheet" href="css/unitmenu.css">
<script src="js/unitmenu.js"></script>

Usage

Example code - unitmenu

let data = {
  label: 'Example', select: true,
  tool: {
    insert: true, config: false, reload: true,
  },
  item: [{
    id: 'item0001', label: 'Boston', type: 'item', selected: false,
    menu: [{
      mid: 'insert', label: 'Add', type: 'insert'
    }, {
      mid: 'delete', label: 'Delete', type: 'delete'
    }, {
      mid: 'copy', label: 'Copy', type: 'copy'
    }, {
      mid: 'rename', label: 'Rename', type: 'rename'
    }, {
      mid: 'convert', label: 'Convert', type: 'convert'
    }, {
      mid: 'setting', label: 'Setting', type: 'setting'
    }, {
      mid: 'export', label: 'Export', type: 'export'
    }, {
      mid: 'info', label: 'Information', type: 'info'
    }]
  }, {
    id: 'item0002', label: 'Chicago', type: 'item', selected: true,
    menu: [{
      mid: 'insert', label: 'Add', type: 'insert'
    }, {
      mid: 'delete', label: 'Delete', type: 'delete'
    }, {
      mid: 'copy', label: 'Copy', type: 'copy'
    }]
  }, {
    id: 'item0003', label: 'Philadelphia', type: 'item', selected: false,
    menu: [{
      mid: 'insert', label: 'Add', type: 'insert'
    }, {
      mid: 'delete', label: 'Delete', type: 'delete'
    }, {
      mid: 'copy', label: 'Copy', type: 'copy'
    }]
  }]
}

$('#example').unitmenu('clear');
let example = $('#example').unitmenu({ data: data });
example.on('selectItem selectUnitMenu selectContextItem', function (e) {
  console.log(e.detail);
});

Example HTML - unitmenu

<div class="unitmenu-container" id="example">
</div>