Display menu when right-clicking?

Asked

Viewed 4,276 times

0

I have a data table, where each row is a record. I want to do like Windows or One Drive/Outlook etc.. Right-clicking the table item opens a menu with the options "Delete" "Edit" and "Hide".

I have been researching about these interactions with the right button but only found equivalent to disable his click on the whole page..

How this concept would be applied only to display the menu..

The scenario is:

A table with columns ID and Name , to each row I have an ID and Name, when right clicking on a row opens a menu with the options "Edit", "Delete", "Hide", where each option is a link, as: "edit.php? id=ID", where ID is the number of the first column.

I didn’t put code because I couldn’t implement anything like it and the table is a common table.

jquery html
  • 1

    Ivcs, I think you went through the same trouble I did, you know what you want, but you don’t know the name of what you want. Search for "custom context menu".

  • 1

    This is called contextmenu, it has a question here that helps you to create an http://answall.com/questions/112469/como-crea-um-menu-de-customcontextion/112472#112472

  • I knew it was the contextmenu, but I can’t apply it to one element, only to the whole page.

3 answers

2

Ivcs, I would use something similar to this code. And add an action to each of the buttons:

 var menu = document.querySelectorAll(".menu");
    if (document.addEventListener) {
      document.addEventListener('contextmenu', function(e) {
        menu[0].style.display = 'block';
        menu[0].style.marginLeft = e.clientX + 'px';
        menu[0].style.marginTop = e.clientY + 'px';
        e.preventDefault();
      }, false);
    } else {
      document.attachEvent('oncontextmenu', function() {
        menu[0].style.display = 'block';
        menu[0].style.marginLeft = e.clientX + 'px';
        menu[0].style.marginTop = e.clientY + 'px';
        window.event.returnValue = false;
      });
    }
ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 200px;
      background-color: #f1f1f1;
      display: none;
    }
    
    li a {
      display: block;
      color: #000;
      padding: 8px 0 8px 16px;
      text-decoration: none;
    }
    
    
    /* Change the link color on hover */
    
    li a:hover {
      background-color: #555;
      color: white;
    }
    <ul class="menu">
      <li><a id="apagar" href="#">Apagar</a></li>
      <li><a id="editar" href="#">Editar</a></li>
      <li><a id="ocultar" href="#">Ocultar</a></li>
    </ul>

This answer is an adaptation of reply user-given Gabriel Rodrigues.

1


0

var menu = document.querySelectorAll(".menu");
if (document.addEventListener) {
  document.addEventListener('contextmenu', function(e) {
    menu[0].style.display = 'block';
    menu[0].style.marginLeft = e.clientX + 'px';
    menu[0].style.marginTop = e.clientY + 'px';
    e.preventDefault();
  }, false);
} else {
  document.attachEvent('oncontextmenu', function() {
    menu[0].style.display = 'block';
    menu[0].style.marginLeft = e.clientX + 'px';
    menu[0].style.marginTop = e.clientY + 'px';
    window.event.returnValue = false;
  });
}
ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 200px;
      background-color: #f1f1f1;
      display: none;
    }
    
    li a {
      display: block;
      color: #000;
      padding: 8px 0 8px 16px;
      text-decoration: none;
    }
    
    
    /* Change the link color on hover */
    
    li a:hover {
      background-color: #555;
      color: white;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p> Clique com o botão direito </p>
<ul class="menu">
      <li><a id="apagar" href="#">Apagar</a></li>
      <li><a id="editar" href="#">Editar</a></li>
      <li><a id="ocultar" href="#">Ocultar</a></li>
</ul>

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.