Biblioteca de menú desplegable configurable multinivel-ContextMenu
| Autor: | Kaeldazs |
|---|---|
| Views Total: | 2,954 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 21, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
ContextMenu. js es una biblioteca de JavaScript ligera vainilla para generar un menú desplegable dinámico multinivel de HTML y JavaScript sin formato.
Funcionamiento
Coloque la hoja de estilo ContextMenu. CSS y el archivo JavaScript ContextMenu. js en su proyecto Web.
<link href="css/contextmenu.css" rel="stylesheet"> <script src="js/contextmenu.js"></script>
Defina una matriz de objetos de elemento de menú anidados como se indica a continuación:
var menu = [
{
text: 'Item 1',
onclick: function(e) {
alert(e);
}
}, {
text: 'Item 2',
sub: [
{
text: 'Item 2.1'
},
{
text: 'Item 2.2',
sub: [
{
text: "Item 2.2.1"
}, {
text: "Item 2.2.2",
sub: [
{
text: "Item 2.2.2.1"
}, {
text: "Item 2.2.2.2",
sub: [
{
type: "infos",
text: "Item 2.2.2.2.1"
},
{
type: 'html',
text: "<div class=\"bidule\">Item 2.2.2.2.2</div>"
}, {
type: 'infos',
text: "Item 2.2.2.2.3"
}
]
}
]
}, {
text: "Item 2.2.3"
}
]
}
]
}, {
type: 'infos',
text: "Item 3"
}
] Mostrar el menú contextual.
showContextMenu(event, menu, opt);
Opciones disponibles.
// show an arrow
arrow: true,
// 'center', 'left', 'right' or false
align: 'center',
// align the menu vertically relatively to an element and add 'contextmenu-active' class to him when the menu is active
element: document.getElementById('id'),
// add 'contextmenu-active' class to element when the menu is active
toggleClass: document.getElementById('id'),
// menu width
width: '55%'
// add margin in pixels
margin: {
top: 5,
right: 0,
bottom: 5,
left: 0
} Api.
// hide the menu hideContextMenu() // hude all sub meunus hideContextMenuChild(0) // add events addEvents( window, //element 'keydown resize dragover click contextmenu DOMMouseScroll wheel mousewheel touch', //events hideContextMenu //handler ); // remove events removeEvents( window, //element 'keydown resize dragover click contextmenu DOMMouseScroll wheel mousewheel touch', //events hideContextMenu //handler );
