javascript - trigger - Fazendo menus de contexto personalizados com o botão direito do mouse para meu aplicativo da web




right menu jquery (5)

Como Adrian disse, os plugins vão funcionar da mesma maneira. Existem três partes básicas que você vai precisar:

1: Manipulador de eventos para 'contextmenu' evento 'contextmenu' :

$(document).bind("contextmenu", function(event) {
    event.preventDefault();
    $("<div class='custom-menu'>Custom menu</div>")
        .appendTo("body")
        .css({top: event.pageY + "px", left: event.pageX + "px"});
});

Aqui, você pode vincular o manipulador de eventos a qualquer seletor para o qual deseja exibir um menu. Eu escolhi o documento inteiro.

2: Manipulador de eventos para 'click' evento 'click' (para fechar o menu personalizado):

$(document).bind("click", function(event) {
    $("div.custom-menu").hide();
});

3: CSS para controlar a posição do menu:

.custom-menu {
    z-index:1000;
    position: absolute;
    background-color:#C0C0C0;
    border: 1px solid black;
    padding: 2px;
}

O importante com o CSS é incluir o z-index e position: absolute

Não seria muito difícil envolver tudo isso em um plugin do jQuery.

Você pode ver uma demonstração simples aqui: http://jsfiddle.net/andrewwhitaker/fELma/

Tenho alguns sites como google-docs e map-quest que têm menus suspensos personalizados quando você clica com o botão direito do mouse. De alguma forma, eles substituem o comportamento do menu suspenso do navegador, e agora estou certo de como eles fazem isso. Eu encontrei um plugin jQuery que faz isso, mas ainda estou curioso sobre algumas coisas:

  • Como é que isso funciona? O menu suspenso do navegador está realmente sendo substituído ou o efeito acabou de ser simulado? Se sim, como?
  • O que o plugin abstrai? O que está acontecendo nos bastidores?
  • Essa é a única maneira de conseguir esse efeito?

Veja vários menus de contexto personalizados em ação


Eu sei que esta pergunta é muito antiga, mas apenas surgiu com o mesmo problema e resolvi-me, por isso estou respondendo no caso de alguém encontrar isso através do google como eu fiz. Eu baseei a minha solução na do Andrew, mas basicamente modifiquei tudo depois.

EDIT : ver o quão popular isso tem sido ultimamente, decidi atualizar também os estilos para torná-lo mais parecido com 2014 e menos como o Windows 95. Eu consertei os bugs @Quantico e @Trengot manchado então agora é uma resposta mais sólida.

EDIT 2 : Eu configuro com StackSnippets como eles são um novo recurso muito legal. Deixo aqui o bom jsfiddle para um pensamento de referência (clique no quarto painel para vê-los funcionar).

Novo snippet de pilha:

// JAVASCRIPT (jQuery)

// Trigger action when the contexmenu is about to be shown
$(document).bind("contextmenu", function (event) {
    
    // Avoid the real one
    event.preventDefault();
    
    // Show contextmenu
    $(".custom-menu").finish().toggle(100).
    
    // In the right position (the mouse)
    css({
        top: event.pageY + "px",
        left: event.pageX + "px"
    });
});


// If the document is clicked somewhere
$(document).bind("mousedown", function (e) {
    
    // If the clicked element is not the menu
    if (!$(e.target).parents(".custom-menu").length > 0) {
        
        // Hide it
        $(".custom-menu").hide(100);
    }
});


// If the menu element is clicked
$(".custom-menu li").click(function(){
    
    // This is the triggered action name
    switch($(this).attr("data-action")) {
        
        // A case for each action. Your actions here
        case "first": alert("first"); break;
        case "second": alert("second"); break;
        case "third": alert("third"); break;
    }
  
    // Hide it AFTER the action was triggered
    $(".custom-menu").hide(100);
  });
/* CSS3 */

/* The whole thing */
.custom-menu {
    display: none;
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #FFF;
    color: #333;
    border-radius: 5px;
    padding: 0;
}

/* Each of the items in the list */
.custom-menu li {
    padding: 8px 12px;
    cursor: pointer;
    list-style-type: none;
    transition: all .3s ease;
    user-select: none;
}

.custom-menu li:hover {
    background-color: #DEF;
}
<!-- HTML -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

<ul class='custom-menu'>
  <li data-action="first">First thing</li>
  <li data-action="second">Second thing</li>
  <li data-action="third">Third thing</li>
</ul>

<!-- Not needed, only for making it clickable on  -->
Right click me

Nota: você pode ver alguns pequenos bugs (dropdown longe do cursor, etc), por favor, certifique-se de que ele funciona no jsfiddle , como é mais parecido com a sua página do que o StackSnippets pode ser.


O menu de contexto do navegador está sendo substituído. Não há como aumentar o menu de contexto nativo em qualquer navegador principal.

Como o plug-in está criando seu próprio menu, a única parte que realmente está sendo abstraída é o evento do menu de contexto do navegador. O plug-in cria um menu html com base na sua configuração e coloca esse conteúdo no local do seu clique.

Sim, esta é a única maneira de criar um menu de contexto personalizado. Obviamente, plugins diferentes fazem coisas um pouco diferentes, mas todos eles irão substituir o evento do navegador e colocar seu próprio menu baseado em HTML no lugar correto.


Você pode assistir a este tutorial: http://www.youtube.com/watch?v=iDyEfKWCzhg Certifique-se de que o menu de contexto esteja oculto no início e tenha uma posição absoluta. Isso garantirá que não haverá vários menus de contexto e criação inútil do menu de contexto. O link para a página é colocado na descrição do vídeo do YouTube.

$(document).bind("contextmenu", function(event){
$("#contextmenu").css({"top": event.pageY +  "px", "left": event.pageX +  "px"}).show();
});
$(document).bind("click", function(){
$("#contextmenu").hide();
});

<!DOCTYPE html>
<html>
<head>
    <title>Right Click</title>

    <link href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet" type="text/css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"></script>

    <script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.ui.position.min.js" type="text/javascript"></script>

</head>
<body>
    <span class="context-menu-one" style="border:solid 1px black; padding:5px;">Right Click Me</span>
    <script type="text/javascript">
        
        $(function() {
        $.contextMenu({
            selector: '.context-menu-one', 
            callback: function(key, options) {
                var m = "clicked: " + key;
                window.console && console.log(m) || alert(m); 
            },
            items: {
                "edit": {name: "Edit", icon: "edit"},
                "cut": {name: "Cut", icon: "cut"},
               copy: {name: "Copy", icon: "copy"},
                "paste": {name: "Paste", icon: "paste"},
                "delete": {name: "Delete", icon: "delete"},
                "sep1": "---------",
                "quit": {name: "Quit", icon: function(){
                    return 'context-menu-icon context-menu-icon-quit';
                }}
            }
        });

        $('.context-menu-one').on('click', function(e){
            console.log('clicked', this);
        })    
    });
    </script>
</body>
</html>





right-click