0

Estoy implementando este plugin de jquery en mi proyecto: https://swisnl.github.io/jQuery-contextMenu/demo.html

Como verán en el script, estoy llamando a ciertas funciones bajo la sexta linea, y justo debajo de esos if, estoy cambiando el background-color del div que desplegó el contextMenu. El problema es que esa acción se aplica solo si hice click en alguna de las opciones del contextMenu y no así cuando haga click fuera del contextMenu, lo cual necesito.

el script:

$(function() {         // Context menú, lo del click derecho
        $.contextMenu({
            selector: '.context-menu-one',
            trigger: 'hover',
            delay: 500,
            callback: function(key, options) {
                if(key=="Editar") Editar_hora($(this).text());
                if(key=="Eliminar") Eliminar_hora($(this).text());
                if(key=="Nueva fila") Nueva_fila($(this).text());
                if(key=="Nuevo Horario") Nuevo_horario($(this).text());
                $(this).css("background-color","#5589DC");
            },
            items: {
                "Editar": {name: "Editar hora del turno", icon: "edit"},
                "Nueva fila": {name: "Nueva fila", icon: "add"},
                "Nuevo horario": {name: "Nuevo turno", icon: "add"},
                "Eliminar": {name: "Eliminar este turno", icon: "delete"},
                "sep1": "---------",
                "quit": {name: "Cerrar", icon: function(){
                    return 'context-menu-icon context-menu-icon-quit';
                }}
            }
        });

        $('.context-menu-one').on('click', function(e){
            console.log('clicked', this);
        })    
    });

1 respuesta 1

2

Encontré la solución en la documentación y está bastante simple: https://swisnl.github.io/jQuery-contextMenu/docs.html#events

el código queda así:

$(function() {         // Context menú, lo del click derecho
    $.contextMenu({
        selector: '.context-menu-one',
        trigger: 'hover',
        delay: 500,
        autoHide: true,
        callback: function(key, options) {
            if(key=="Editar") Editar_hora($(this).text());
            if(key=="Eliminar") Eliminar_hora($(this).text());
            if(key=="Nueva fila") Nueva_fila($(this).text());
            if(key=="Nuevo Horario") Nuevo_horario($(this).text());
            $(this).css("background-color","#5589DC");
        },
        items: {
            "Editar": {name: "Editar hora del turno", icon: "edit"},
            "Nueva fila": {name: "Nueva fila", icon: "add"},
            "Nuevo horario": {name: "Nuevo turno", icon: "add"},
            "Eliminar": {name: "Eliminar este turno", icon: "delete"},
            "sep1": "---------",
            "quit": {name: "Cerrar", icon: function(){
                return 'context-menu-icon context-menu-icon-quit';
            }}
        },
        events: {
          hide : function(options){
            $(this).css("background-color","#5589DC");
        }}
    });

    $('.context-menu-one').on('click', function(e){
        console.log('clicked', this);
    })    
});

Había buscado un montón y no daba en el clavo por saber poco inglés >.< pero ahí está.

EDIT:

El trozo de código que me faltaba era este, que no viene incluido en el plugin, sino que lo encontré en su documentación:

,
        events: {
          hide : function(options){
            $(this).css("background-color","#5589DC");
        }}

Básicamente lanza un evento cuando se esconde el ContextMenu, se aprecia que estoy cambiando el background-color, pero esta vez sí lo hará cuando se haga click fuera del ContextMenú.

3
  • ¿Podrías explicar (dentro de la respuesta) en qué consiste el cambio que hiciste y por qué funciona?
    – Alvaro Montoro
    el 15 oct. 2016 a las 3:09
  • he editado, dime si se entiende. el 15 oct. 2016 a las 3:24
  • Sí, muchas gracias
    – Alvaro Montoro
    el 15 oct. 2016 a las 3:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.