Simple Vanilla menú contextual de JavaScript

Vista prévia

Descripción

Un menú contextual sencillo, animado y personalizable de estilo modal (menú de clic derecho) implementado en Vanilla JavaScript. El menú contextual se deslizará en su página web con una superposición de pantalla completa a medida que haga clic con el botón derecho en un contenedor específico.

Funcionamiento

Cargue el marco de JavaScript de Vanilla necesario en el documento HTML.

<script src="/path/to/vanilla.min.js"></script>

Cargue el fichero Vanilla. ContextMenu. js y Vanilla. ContextMenu. CSS en el documento.

<script src="/path/to/vanilla.contextmenu.js"></script>
<link rel="stylesheet" href="/path/to/vanilla.contextmenu.css">

Agregue atributo de datos modal a los vínculos y use atributo href para definir lo que se debe abrir en el modal.

<div id="example-1" class="example">

<ul>



<li data-highlight="highlight">Right click me</li>

</ul>
</div>

El JavaScript para crear el menú contextual.

vanilla.ctxm( '#example-1 li', {

items: {



highlight: { // Highlight the clicked image





title:'Highlight',





icon:'this.data-highlight',





callback: function() {







var target = vanilla.ctxm.getTarget();







target.toggleClass('highlight')









.attr('data-highlight', 'highlight');;





}



},



delete: { // Delete the clicked item





title:'Delete',





icon:'delete',





callback: function() {







var target = vanilla.ctxm.getTarget();







target.remove();





}



}

}
} );

Opciones de configuración completas.

vanilla.ctxm.defaults = {

background: '#FFF',





 // Background color

border: '#CDCDCD',






// Border color

fontSize: '14px',






 // Font size

headerText: 'Context menu',

 // Menu header title

iconPosition: 0,







// Icon position [0: left, 1: right]

opacity: 0.5,








 // Overlay opacity

overlay: '#000',







// Overlay color

width: '200px'








// Menu width
}