Show menu when right-clicking?

Navigation
0

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

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

How would you apply this concept only to display the menu ..

The scenario is:

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

I did not put code because I could not implement anything like that and the table is a common table.

    
asked by anonymous 17.03.2016 / 06:32

3 answers

1

I used this library is simple, but it has some limitations (like the few icons):

link

    
30.03.2016 / 20:47
1

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 response is an adaptation of response given by the user Gabriel Rodrigues .

    
17.03.2016 / 10:05
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>Cliquecomobotãodireito</p><ulclass="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>
    
17.03.2016 / 12:04
Hide and Show DIV based on SELECT response How to put email in the login form?