Convertir contenedores con enlaces en botones con jQuery

Os dejo una sencilla tarea para crear un botón grande con jQuery (y CSS) a partir de un contenedor (DIV, SPAN, LI…) con un enlace dentro tal como:

<div>
<a class="myclass linkparent" href="http://www.google.com/ig" onclick="alert('iGoogle');">iGoogle</a>
</div>

utilizando jQuery de este modo:

$(document).ready(function(){
  // click en contenedores de enlaces
  $('.linkparent').each(function(){
    var a = $(this);
    a.click(function(e){
      e.stopPropagation();
    });
    a.parent('div,span,li').bind('click',function(e){
      a.triggerHandler("click");
    });
  });
});

Solo hay que añadir a los enlces (u otros elementos con alguna función al hacer click) que queramos la clase que he llamado “linkparent” y su contenedor, ya sea DIV, SPAN o LI, actuará como si pincharamos el enlace, tanto a efectos de enlace, como a efectos de funciones asociadas al evento click.

He pensado que esta tecnica podría resultar útil para algunos que empiezan a usar jQuery para sus diseños. Notese el stopPropagation() que impide que la acción se produzca 2 veces al pinchar sobre el enlace (una por pinchar el enlace y otra por pinchar dentro del contenedor)

Anuncios
  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: