Author: | winetree94 |
---|---|
Views Total: | 303 views |
Official Page: | Go to website |
Last Update: | November 21, 2020 |
License: | MIT |
Preview:

Description:
A tiny, dynamic, multi-level context menu library that can be attached to any DOM element via vanilla JavaScript.
How to use it:
1. Download and unzip the package, 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 attach the context menu to an element you specify.
const targetElement = document.getElementById('example'); const basicTableContext = new VanillaContext(targetElement, { nodes: myNodes });
Changelog:
11/21/2020
- v1.0.13: Bugfixed
11/13/2020
- v1.0.11: Bugfixed
09/15/2020
- v1.0.6: Bugfixed