|
Control del botón derecho del ratón en el Explorer 5 |
1 .
Introducción
2 .
Ocultar el menú
3 .
Mostrar un mensaje
4 .
Mostrar un Menú contextual
5 .
Menú Final
El objetivo de este artículo es capturar en Internet Explorer 5 los eventos producidos por el botón derecho del ratón, y hacer menús contextuales o menús flotantes que respondan a dicho evento.
Introducción
Muchas veces he querido abrir otra página web o simplemente ver su código y he hecho click con el botón secundario del ratón. Cuál ha sido mi sorpresa al descubrir que no sucedía nada, o que el creador del web se permitía mostrarme una ventanita con alguna broma derivada del uso del botón derecho del ratón. Esas son las cosas que vamos a mostrar a lo largo del siguiente artículo...
Ocultar el menú
Esto es muy fácil. Basta con que el controlador de evento onContextMenu, llame a una función que no haga nada. Así, pondremos lo siguiente en la etiqueta body.
<body onContextMenu="return false">
Podemos ver un ejemplo y su código fuente.
Mostrar un mensaje
Con la misma facilidad que en el ejemplo anterior, podemos mostrar un mensaje indicando que el botón derecho está deshabilitado.
<body onContextMenu="alert('El botón derecho está deshabilitado')">
Podemos ver un ejemplo y su código fuente.
Mostrar un Menú contextual
El avispado lector, se habrá dado cuenta que cuando se produzca este evento puede llamar a cualquier función. Eso sí, sin que se nos olvide el return false, que hace que la función devuelva algo y así evitamos que se despliegue el otro menú.
Podemos incluso, desplegar nuestro propio menú contextual. Lo que hacemos, es que cuando se pulse el botón derecho, se muestra una capa con nuestro menú. La función mostrarMenu, se encarga de hacer visible la capa además de controlar la posición donde se muestra.
<!--[if IE 5]> <div id="ie5menu" class="menu"> <div class="menuitems">www.programacion.net</div> <div class="menuitems">www.webestilo.com</div> ... </div> <![endif]-->
Lo que está escrito entre los comentarios , es interpretado únicamente por el Internet Explorer 5 o superior. El resto de los navegadores, lo consideran como simples comentarios.
Con el siguiente script, nos encargamos de mostrar el menú cuando se haga un click con el botón derecho y de ocultar cuando se haga click con el izquierdo.
<script language="JavaScript1.2">
if (document.all && window.print){
document.oncontextmenu=mostrarMenu;
document.body.onclick=ocultarMenu;
}
</script>
siendo mostrarMenu y ocultarMenu, las siguientes funciones:
function mostrarMenu(){
// colocamos la capa donde hemos hecho click con el ratón
menuDiv.style.left = document.body.scrollLeft + event.clientX;
menuDiv.style.top = document.body.scrollTop + event.clientY;
// hacemos la capa visible
menuDiv.style.visibility = "visible";
return false;
}
function ocultarMenu(){
// ocultamos la capa
menuDiv.style.visibility="hidden";
}
Podemos ver un ejemplo y su código fuente.
Menú Final
Ya tenemos un menú contextual simple. Ahora podemos refinarlo un poco y añadirle algunas funcionalidades. Lo primero es hacer un control sobre dónde se va a mostrar el menú y comprobar que no se sale del límite de la pantalla.
Otras funcionalidades añadidas son resaltar la opción del menú (encender) y desresaltar (apagar).
function encender(){
if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundColor="highlight";
event.srcElement.style.color="white";
}
}
function apagar(){
if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundColor="";
event.srcElement.style.color="black";
}
}
Podemos ver un ejemplo y su código fuente.
 |
Publicado por: Administrador |
|
|
