Crear menús contextuales personalizados en Vanilla JavaScript-context-menu. js
| Autor: | mturco |
|---|---|
| Views Total: | 2,014 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 25, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
context-menu. js es un plugin JavaScript/LESS que le ayuda a crear menús contextuales dentro de cualquier elemento de contenedor que especifique.
Funcionamiento
Instale e importe el context-menu. js en el proyecto.
# NPM $ npm install context-menu --save
// ES 6
import ContextMenu from 'ContextMenu';
// CommonJS:
const ContextMenu = require('ContextMenu'); Incluya la versión de UMD de context-menu. js en la Página Web.
<script src="context-menu.js"></script>
Defina los elementos de menú en JavaScript:
var items = [
{ name: 'Cut', fn: function(target) { console.log('Cut', target); }},
{ name: 'Copy', fn: function(target) { console.log('Copy', target); }},
{ name: 'Paste', fn: function(target) { console.log('Paste', target); }},
{},
{ name: 'Select All', fn: function(target) { console.log('Select All', target); }},
]; Adjunte el menú contextual a un elemento.
<div class="default" tabindex="0">Default theme</div>
var myMenu = new ContextMenu('.default', items); Agregue una clase CSS adicional al menú contextual. Útil para estilos de menú personalizados.
var myMenu = new ContextMenu('.default', items,{
className: 'custom-theme',
minimalStyling: true
}); Event listeners.
// events: created, shown, hidden, itemselected
instance.on('shown', function);
instance.off('shown', function);
