Event when clicking outside the JQuery ContextMenu Plugin

Question

Event when clicking outside the JQuery ContextMenu Plugin

Navigation

#1 by (2 votes)

0

I am implementing this jquery plugin in my project: link

As you will see in the script, I am calling certain functions under the sixth line, and just below those if, I am changing the background-color of the div that displayed the contextMenu. The problem is that this action applies only if I clicked on one of the options in the contextMenu and not when I click outside of the contextMenu, which I need.

the 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);
        })    
    });

jquery jquery-plugins

asked by Roberto Sepúlveda Bravo 15.10.2016 в 04:07

source

1 answer

Replace input string spaces Search for items in a list

score 2 · Accepted Answer

I found the solution in the documentation and it's quite simple: link

the code looks like this:

$(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);
    })    
});

I had searched a lot and did not hit the spot for knowing little English >. < but there it is.

EDIT:

The piece of code that I was missing was this one, which is not included in the plugin, but I found it in its documentation:

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

It basically throws an event when the ContextMenu hides, it's appreciated that I'm changing the background-color, but this time it will when I click outside of the ContextMenu.