Micaela 5 de Octubre de 2009 a las 16.31
   Imprimir artículo
elWebmaster.com

Truco para sombrear un enlace al cliquearlo con MooTools o jQuery

Trucos, iPhone, javascript, background, fondo, jQuery, Safari, diseño web, truco, mootols

mootoolsUna de las cosas más interesantes de Safari en el iPhone es que posee un efecto que hace que se oscurezca el fondo cuando se hace clic en un link. Es un detalle sútil, pero acentúa el hecho de que una acción está ocurriendo.

Entonces ¿Porqué no implementar este bonito efecto en tu sitio web? Esto se puede lograr fácilmente con un poco de MooTools o jQuery...¿Quieres ver? Es más fácil de lo que parece.

El CSS

PLAIN TEXT
  1. .clicked { padding:1px 2px; -moz-border-radius:5px; background:#aaa; }

Dale el estilo que desees.

El Javascript MooTools

PLAIN TEXT
  1. window.addEvent('domready',function() {
  2. var lynx = $$('a');
  3. lynx.addEvent('click',function(e) {
  4. lynx.removeClass('clicked'); //remove from others
  5. this.addClass('clicked');
  6. });
  7. });

El Javascript jQuery

PLAIN TEXT
  1. $(document).ready(function() {
  2. var lynx = $('a');
  3. lynx.click(function(e) {
  4. lynx.removeClass('clicked');
  5. $(this).addClass('clicked');
  6. });
  7. });

La sintaxis entre los dos frameworks es muy similar.

Este ejemplo muestra el fondo gris pero lo que es genial es que dado que el snippet utiliza una clase CSS, puedes hacer que el color de fondo sea el que prefieras.

Ver una demostración »

¿Qué esperas para empezar a experimentar?

Fuente: David Walsh Blog


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Artículos relacionados

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión