A Lightweight Context Menu Plugin For The Web Using Pure Javascript | VanillaContextMenu

Context-Menu-Plugin

This is a lightweight, dependency-free JavaScript library for modern web browsers. A small, dynamic, multi-level context menu library that can be attached to any DOM element via Vanilla JavaScript.

jquery context menu, javascript context menu, context menu script, jquery context menu dynamic items, jquery context menu example, html context menu

How to make use of it:

1. Download and unzip the package deal, then include the following JavaScript and CSS files on the webpage.

<link href="vanilla-context.min.css" rel="stylesheet" />
<script src="vanilla-context.min.js"></script>

2. Define your hierarchical menu items (nodes) in a JS array as follows:

const myNodes = [{
      renderer: (params) => {
        const td = params.originEvent.target.closest('td');
        return '<b>' + td.textContent + '</b>';
      },
      disabled: true,
      style: {
        height: '60px'
      }
      }, {
      renderer: 'Menu Item',
      onClick: ({ api, originEvent }) => {
        const row = originEvent.target.closest('tr');
        if (row) {
          row.parentElement.removeChild(row);
        }
        api.close();
      },
      }, {
      renderer: '<bold>Menu Item</bold>',
      onClick: (e) => {
        console.log(e);
      },
      children: [{
        renderer: 'Menu Item',
        onClick: (e) => {
          console.log(e);
        }
      }, {
        renderer: '<bold>Menu Item</bold>',
        onClick: (e) => {
          console.log(e);
        },
        children: [{
          renderer: (e) => {
            const p = document.createElement('p');
            p.innerHTML = 'Menu Description';
            return p;
          },
          onClick: (e) => {
            console.log(e);
          }
        }, {
          renderer: '<bold>Menu Item</bold>',
          onClick: (e) => {
            console.log(e);
          },
          children: [{
            renderer: 'Menu Item',
            onClick: (e) => {
              console.log(e);
            }
          }, {
            renderer: '<bold>Menu Item</bold>',
            onClick: (e) => {
              console.log(e);
            }
          }]
        }]
      }]
}]

3. Initialize the library and fix the context menu to a component you specify.

const targetElement = document.getElementById('example');
const basicTableContext = new VanillaContext(targetElement, {
      nodes: myNodes
});

Tiny Context Menu Plugin For The Web, Context Menu Plugin/Github, context menu js library, jquery datatable context menu


See Demo And Download

Official Website(winetree94): Click Here

This superior jQuery/javascript plugin is developed by winetree94. For extra Advanced Usages, please go to the official website.