elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Security Series.XSS. [Cross Site Scripting]


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Menu contextual. Como cambio el boton para activarlo.		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Menu contextual. Como cambio el boton para activarlo.  (Leído 3,885 veces)
70N1


Desconectado Desconectado

Mensajes: 355


Ver Perfil
Menu contextual. Como cambio el boton para activarlo.
« 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
En línea
70N1
MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: Menu contextual. Como cambio el boton para activarlo.
« Respuesta #1 en: 10 Julio 2014, 04:17 am »
¿A mi me funciona tu código tal cual, que navegador tienes?

Mira:

http://jsfiddle.net/2fwqH/
En línea
70N1


Desconectado Desconectado

Mensajes: 355


Ver Perfil
Re: Menu contextual. Como cambio el boton para activarlo.
« Respuesta #2 en: 10 Julio 2014, 04:42 am »
Pero quiero activar el menu al presionar el click izquierdo no el derecho.
Como lo cambio?.
En línea
70N1
MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: Menu contextual. Como cambio el boton para activarlo.
« Respuesta #3 en: 10 Julio 2014, 05:34 am »
Prueba así:

Código
  1. var xMousePosition = 0;
  2. var yMousePosition = 0;
  3.  
  4.  
  5. window.onload = function () {
  6.     document.body.onclick = function () {
  7.         checkIfPossible(event);
  8.     }
  9.     document.getElementById("menu").onclick = function () {
  10.         mymenu(event, this)
  11.     }
  12. }
  13.  
  14. document.onmousemove = function (e) {
  15.     xMousePosition = e.clientX + window.pageXOffset;
  16.     yMousePosition = e.clientY + window.pageYOffset;
  17. };
  18.  
  19.  
  20. function configurar(element) {
  21.     alert("Configurar");
  22. }
  23.  
  24. function salir(element) {
  25.     alert("Salir");
  26. }
  27.  
  28. function checkIfPossible(event) {
  29.     var temp = document.getElementById('ctxmenu1');
  30.     if (temp != null) temp.parentNode.removeChild(temp);
  31. }
  32.  
  33. function mymenu(event, element) {
  34.     var x = document.getElementById('ctxmenu1');
  35.     if (x) x.parentNode.removeChild(x);
  36.  
  37.     var d = document.createElement('div');
  38.     d.setAttribute('class', 'ctxmenu');
  39.     d.setAttribute('id', 'ctxmenu1');
  40.     element.parentNode.appendChild(d);
  41.     d.style.left = xMousePosition + "px";
  42.     d.style.top = yMousePosition + "px";
  43.     d.onmouseover = function (e) {
  44.         this.style.cursor = 'pointer';
  45.     }
  46.     d.onclick = function (e) {
  47.         element.parentNode.removeChild(d);
  48.     }
  49.  
  50.     var p = document.createElement('p');
  51.     d.appendChild(p);
  52.     p.onclick = function () {
  53.         configurar(element)
  54.     };
  55.     p.setAttribute('class', 'ctxline');
  56.     p.innerHTML = "Configurar";
  57.  
  58.     var p2 = document.createElement('p');
  59.     d.appendChild(p2);
  60.     p2.onclick = function () {
  61.         salir(element)
  62.     };
  63.     p2.setAttribute('class', 'ctxline');
  64.     p2.innerHTML = "Salir";
  65.     event.stopPropagation();
  66.     return false;
  67. }

Y así:

Código
  2.     <div id="menu">Click here!</div>
  3. </body>

http://jsfiddle.net/2fwqH/1/
En línea
70N1


Desconectado Desconectado

Mensajes: 355


Ver Perfil
Re: Menu contextual. Como cambio el boton para activarlo.
« Respuesta #4 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
En línea
70N1
JorgeEMX
Ex-Staff
*
Desconectado Desconectado

Mensajes: 2.615



Ver Perfil WWW
Re: Menu contextual. Como cambio el boton para activarlo.
« Respuesta #5 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.
En línea
Siempre hay algo nuevo que aprender
Mi canal de YOUTUBE: https://www.youtube.com/channel/UCt1WPhzdZW7tRTe5I5USkGQ
70N1


Desconectado Desconectado

Mensajes: 355


Ver Perfil
Re: Menu contextual. Como cambio el boton para activarlo.
« Respuesta #6 en: 22 Julio 2014, 20:36 pm »
Si te parece voy a gastar el tiempo creando uno desde el principio... no fastidies.
En línea
70N1
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Como quitar en el menú contextual del explorador del windows la opcion propieda
Windows 		obturance 5 7,716 Último mensaje 24 Diciembre 2010, 20:23 pm
por Arcano.
Como puedo recuperar el menu contextual 7-zip del Explorador
Windows 		fifinio 6 12,561 Último mensaje 29 Diciembre 2013, 22:04 pm
por _Slash_
Como agregar Iconos al Menu Contextual de WindowsXP
Scripting 		Lordzito 5 5,095 Último mensaje 7 Marzo 2012, 05:07 am
por Lordzito
Como cifrar archivos desde el menú contextual de Nautilus
Noticias 		wolfbcn 0 2,556 Último mensaje 12 Diciembre 2012, 02:57 am
por wolfbcn
Ayuda para restaurar el menú contextual de los items de la barra de tareas
Windows 		Eleкtro 0 2,626 Último mensaje 23 Enero 2016, 14:01 pm
por Eleкtro
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines