Menú contextual de varios niveles en JavaScript-ContextmenuJS

Vista prévia

Descripción

Sin embargo, otro pequeño, dinámico, menú contextual multinivel escrito en JavaScript puro.

ContextmenuJS le permite crear un menú contextual de un conjunto de objetos de menús con el botón derecho, con compatibilidad con animaciones de fundido de entrada/salida, iconos personalizados, elementos de menú desactivados y una cantidad ilimitada de niveles de menú.

¿Cómo funciona?

Enlace a los archivos JavaScript y CSS necesarios.

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

Cargar un tema CSS (opcional)

<link rel="stylesheet" href="theme/contextmenu_dark.min.css">
<link rel="stylesheet" href="theme/contextmenu_light.min.css">

Cree los datos del menú con los siguientes pares clave-valor.

var myMenu = [


{



"text": "Item 1",



"sub": [




{





"text": "Item 1-1"




},




{





"text": "Item 1-22"




},




{





"type": ContextMenu.DIVIDER




},




{





"text": "Item 1-3",





"enabled": false,





"sub": [






{







"text": "Item 1-3-1"






}





]




}



]


},


{



"text": "Item 2",



"icon": '<i class="fas fa-exclamation-circle"></i>', // font awesome icon



"events": {




"click": function(e){





alert(e);




}



}


}
];

Inicializar el menú contextual.

menu = new ContextMenu(myMenu);

Adjunte el menú contextual a un contenedor específico.

document.getElementById('YOUR-CONTAINER').addEventListener("contextmenu", function(e){

menu.display(e);
});

Opciones posibles para personalizar el menú contextual.

new ContextMenu(myMenu,{



// close on window resize


close_on_resize: true,



// close on click


close_on_click: true,



// default icon or CSS classes


default_icon: '',



// default text


default_text: ''



// arrow icon for sub menus


sub_icon: ''



// mouse offset in pixels


mouse_offset: 0



});

API methods.

// enable the context menu on a specfic container
menu.display(e, target);

// reload the context menu
menu.reload();


// hide the context menu manually
menu.hide();


// set new options
menu.setOptions(options);

 // override options
menu.changeOption(option, value);

// return options
menu.getOptions();

Registro de cambios

07/25/2018

• Se agregaron dos temas + versiones minificadas
• Corregido Bug, donde podía pasar el cursor sobre el lugar donde estaría un submenú y se mostraría