Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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>Carregando comentários...