Imprimir Página - Menu contextual. Como cambio el boton para activarlo.

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:

Código:


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:

Código:

.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:

Código:

<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í:

Código

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í:

Código

<body>
    <div id="menu">Click here!</div>
</body>

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

Cita de: 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

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.

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: 70N1 en 10 Julio 2014, 03:38 am