Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Hugo Borges_120734

como clicar um menu botão direito dentro de uma tabela

Por , em Javascript

Recommended Posts

Hugo Borges_120734    6

Hugo Borges_120734
Postado

Galera gostaria de alterar o meu código para que em cada campo da tabela ele gere um tipo de menu diferente.

 

Segue código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Teste</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				font-family: Arial, Helvetica, sans-serif;
			}
			
			ul {
				list-style: none
			}
			
			#context_menu {
				background: #CECECE;
				-moz-border-radius: 5px 5px;
				width: 200px;
				font-size: 10pt;
				position: absolute;
				display: none;
			}
			
			#context_menu ul li {
				padding: 2px 10px;
				-moz-border-radius: 5px 5px;
				cursor: default;
			}
			
			#context_menu ul li:hover {
				background: #069;
				color: #FFF;
			}
		</style>
		<script type="text/javascript" language="JavaScript">
			function click(e){
				document.getElementById("teste").innerHTML = "";
				var menu = document.getElementById("context_menu");
				var mouseEvent = e || event;
				if (mouseEvent.button == 2 || mouseEvent.button == 3) {
					mostrar(mouseEvent);
					menu.onmouseout = function(e){
						var mouseEvent = e || event;
						var element = mouseEvent.relatedTarget || mouseEvent.toElement; 
						if (element.nodeName != "LI") {
							esconder();
						}
					};
				}
				if (mouseEvent.button == 0 || mouseEvent.button == 1) {
					esconder();
				}
			}
			
			document.onmousedown = click;
			document.oncontextmenu = function(){
				return false
			};
			
			function mostrar(e){
				var menu = document.getElementById("context_menu");
				menu.style.display = "block";
				menu.style.top = e.clientY + 5 + "px";
				menu.style.left = e.clientX + 5 + "px";
			}
			
			function esconder(){
				setTimeout(function(){
					var menu = document.getElementById("context_menu");
					menu.style.display = "none";
				}, 100);
			}
			
		</script>
	</head>
	<body>
    
    <table width="100%" border="0">
  <tr>
    <td height="130">menu 1 aqui</td>
    <td>menu 2 aqui</td>
  </tr>
</table>
    
		<div id="teste"></div>
		<div id="context_menu">
			<ul>
				<li>Copiar</li>
				<li>Colar</li>
				<li>Selecionar Tudo</li>
			</ul>
		</div>
	</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Foi necessário modificar o script, criando uma instância para cada TD, com escopos e eventos isolados:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Teste</title>
  <style type="text/css">
  * {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
  }

  ul {
    list-style: none
  }

  .context-menu {
    background: #CECECE;
    -moz-border-radius: 5px 5px;
    width: 200px;
    font-size: 10pt;
    position: absolute;
    display: none;
  }

  .context-menu ul li {
    padding: 2px 10px;
    -moz-border-radius: 5px 5px;
    cursor: default;
  }

  .context-menu ul li:hover {
    background: #069;
    color: #FFF;
  }
  </style>
</head>
<body>

<table width="100%" border="0">
  <tr>
    <td height="130" data-menu="menu1" id="td1">menu 1 aqui</td>
    <td data-menu="menu2" id="td2">menu 2 aqui</td>
  </tr>
</table>

  <div id="teste"></div>
  <div id="menu1" class="context-menu">
    <ul>
      <li>Copiar</li>
      <li>Colar</li>
      <li>Selecionar Tudo</li>
    </ul>
  </div>
  <div id="menu2" class="context-menu">
    <ul>
      <li>Copiar 2</li>
      <li>Colar 2</li>
      <li>Selecionar Tudo 2</li>
    </ul>
  </div>

<script type="text/javascript" language="JavaScript">
function ContextMenu($element){
  this.$element = $element;
  this.menu     = document.getElementById(this.$element.getAttribute('data-menu'));
  this.teste    = document.getElementById("teste");

  this.events();
}

ContextMenu.prototype.contextMenuClick = function (e) {
    var self = this,
        mouseEvent = e || event;;

    self.teste.innerHTML = "";

    if (mouseEvent.button == 2 || mouseEvent.button == 3) {
      self.mostrar(mouseEvent);
      self.menu.onmouseout = function(e){
        var mouseEvent = e || event;
        var element = mouseEvent.relatedTarget || mouseEvent.toElement;
        if (element.nodeName != "LI") {
          self.esconder();
        }
      };
    }

    if (mouseEvent.button == 0 || mouseEvent.button == 1) {
      self.esconder();
    }
  };

  ContextMenu.prototype.events = function () {
    this.$element.addEventListener('mousedown', this.contextMenuClick.bind(this));
  };

  ContextMenu.prototype.mostrar = function(e){
    this.menu.style.display = "block";
    this.menu.style.top = e.clientY + 5 + "px";
    this.menu.style.left = e.clientX + 5 + "px";
  };

  ContextMenu.prototype.esconder = function(){
    setTimeout(function(){
      this.menu.style.display = "none";
    }.bind(this), 100);
  };

  document.oncontextmenu = function(){ return false; };

  var menu1 = new ContextMenu(document.getElementById("td1"));
  var menu2 = new ContextMenu(document.getElementById("td2"));

</script>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito