Posts Tagged ‘ jQuery ’

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)