Título: Menu contextual. Como cambio el boton para activarlo.
Publicado por: 70N1 en 10 Julio 2014, 03:38 am
Hola. El codigo que dejare al final sirve para mostrar un menu al hacer click con el boton derecho del raton y quiero cambiarlo por el izquierdo. Me podeis echar una mano? JS: var xMousePosition = 0; var yMousePosition = 0; document.onmousemove = function(e) { xMousePosition = e.clientX + window.pageXOffset; yMousePosition = e.clientY + window.pageYOffset; }; function configurar(element) { alert("Configurar"); } function salir(element) { alert("Salir"); } function mymenu(element) { var x = document.getElementById('ctxmenu1'); if(x) x.parentNode.removeChild(x); var d = document.createElement('div'); d.setAttribute('class', 'ctxmenu'); d.setAttribute('id', 'ctxmenu1'); element.parentNode.appendChild(d); d.style.left = xMousePosition-150 + "px"; d.style.top = yMousePosition + "px"; d.onmouseover = function(e) { this.style.cursor = 'pointer'; } d.onclick = function(e) { element.parentNode.removeChild(d); } document.body.onclick = function(e) { element.parentNode.removeChild(d); } var p = document.createElement('p'); d.appendChild(p); p.onclick=function() { configurar(element) }; p.setAttribute('class', 'ctxline'); p.innerHTML = "Configurar"; var p2 = document.createElement('p'); d.appendChild(p2); p2.onclick=function() { salir(element) }; p2.setAttribute('class', 'ctxline'); p2.innerHTML = "Salir"; return false; }
CSS: .ctxmenu { position:absolute; min-width: 128px; height:auto; padding: 8px; margin:0; margin-left:32px; margin-top:-16px; border: 1px solid #999; background: #F8F8F8; box-shadow: 2px 2px 2px #AAA; z-index:11; overflow: visible; } .ctxline { display:block; margin:0px; padding:2px 2px 2px 8px; border:1px solid #F8F8F8; border-radius:3px; font-size:13px; font-family:Arial, Helvetica, sans-serif; overflow:visible; } .ctxline:hover { border:1px solid #BBB; background-color: #F0F0F0; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); }
HTML: <div onContextMenu="return mymenu(this)"> CLICK </div>
Probe cambiando oncontextmenu por onclick pero nada, no sirve... ayudaaa
Título: Re: Menu contextual. Como cambio el boton para activarlo.
Publicado por: MinusFour en 10 Julio 2014, 04:17 am
¿A mi me funciona tu código tal cual, que navegador tienes?
Mira:
http://jsfiddle.net/2fwqH/
Título: Re: Menu contextual. Como cambio el boton para activarlo.
Publicado por: 70N1 en 10 Julio 2014, 04:42 am
Pero quiero activar el menu al presionar el click izquierdo no el derecho. Como lo cambio?.
Título: Re: Menu contextual. Como cambio el boton para activarlo.
Publicado por: MinusFour en 10 Julio 2014, 05:34 am
Prueba así: var xMousePosition = 0; var yMousePosition = 0; window.onload = function () { document.body.onclick = function () { checkIfPossible(event); } document.getElementById("menu").onclick = function () { mymenu(event, this) } } document.onmousemove = function (e) { xMousePosition = e.clientX + window.pageXOffset; yMousePosition = e.clientY + window.pageYOffset; }; function configurar(element) { alert("Configurar"); } function salir(element) { alert("Salir"); } function checkIfPossible(event) { var temp = document.getElementById('ctxmenu1'); if (temp != null) temp.parentNode.removeChild(temp); } function mymenu(event, element) { var x = document.getElementById('ctxmenu1'); if (x) x.parentNode.removeChild(x); var d = document.createElement('div'); d.setAttribute('class', 'ctxmenu'); d.setAttribute('id', 'ctxmenu1'); element.parentNode.appendChild(d); d.style.left = xMousePosition + "px"; d.style.top = yMousePosition + "px"; d.onmouseover = function (e) { this.style.cursor = 'pointer'; } d.onclick = function (e) { element.parentNode.removeChild(d); } var p = document.createElement('p'); d.appendChild(p); p.onclick = function () { configurar(element) }; p.setAttribute('class', 'ctxline'); p.innerHTML = "Configurar"; var p2 = document.createElement('p'); d.appendChild(p2); p2.onclick = function () { salir(element) }; p2.setAttribute('class', 'ctxline'); p2.innerHTML = "Salir"; event.stopPropagation(); return false; }
Y así: <div id="menu">Click here! </div>
http://jsfiddle.net/2fwqH/1/
Título: Re: Menu contextual. Como cambio el boton para activarlo.
Publicado por: 70N1 en 15 Julio 2014, 16:30 pm
Muchas gracias por contestar... Pero es que al final e optado por un code mas simple solo con css
Título: Re: Menu contextual. Como cambio el boton para activarlo.
Publicado por: JorgeEMX en 15 Julio 2014, 22:06 pm
Muchas gracias por contestar... Pero es que al final e optado por un code mas simple solo con css
Y ésto es lo que llamo estar haciendo copy-paste de los resultados de Google.
Título: Re: Menu contextual. Como cambio el boton para activarlo.
Publicado por: 70N1 en 22 Julio 2014, 20:36 pm
Si te parece voy a gastar el tiempo creando uno desde el principio... no fastidies.
|