Menú contextual dinámico con iconos personalizados-custoMenu

Vista prévia

Descripción

Un menú contextual dinámico y personalizable creado con jQuery que se puede adjuntar a cualquier elemento contenedor, con soporte para iconos personalizados, descripciones y funciones de clic.

Funcionamiento

Importar la hoja de estilo custoMenu. CSS y JavaScript custoMenu. js en el documento.

<link rel="stylesheet" href="custoMenu.css">
<script src="custoMenu.js"></script>

Cargue un conjunto de iconos de su elección para los íconos del menú.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Crear elementos de menú con iconos personalizados y descripciones en el código JavaScript de la siguiente manera:

var filectxmenu = {


name: 'file',


items: {



'openfile' : {




text: '<i class="material-icons">&#xE254;</i>',




desc: 'Open',




func: function() {






alert('lol');




}



},



'downloadfile' : {




text: '<i class="material-icons">&#xE2C4;</i>',




desc: 'Download'



},



'copy' : {




text: '<i class="material-icons">&#xE14D;</i>'



},



'cut' : {




text: '<i class="material-icons">&#xE14E;</i>'



},



'delete' : {




text: '<i class="material-icons">&#xE872;</i>'



},



'rename' : {




text: '<i class="material-icons">&#xE22B;</i>'



}


}
}

Inicializar el menú contextual.

document.addEventListener('DOMContentLoaded', function(){

custoMenu.addMenu(filectxmenu);
});

Adjunte el menú contextual a un elemento que especifique.

<div class="custoMe"



data-name="file"



data-src="source">


 Right Click Me
</div>