@pcsd/jquery-contextmenu

npm package test - context menu

Getting started

<!-- 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>

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

1. fontawesome
2. jquery
3. contextmenu
4. contextsmenu

Demo

Example code - contextsmenu

let data = {
  label: 'Example', select: true,
  tool: {
    insert: true, config: false, reload: true,
  },
  item: [{
    id: 'example0001', 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: 'example0002', 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'
    }, {
      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: 'example0003', 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'
    }, {
      mid: 'rename', label: 'Rename', type: 'rename'
    }]
  }]
}

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

Example HTML - contextsmenu

<div class="sidelist-menu" id="example-menu">
</div>