« En qué he estado
Control de publicación en ActiveRecord »

Patrones jQuery: toggleTarget

Visita este artí­culo en http://www.estadobeta.com/2008/09/22/patrones-jquery/

Por Ismael en artículos, javascript, jquery

Hace un tiempo recopilo funciones y utilidades que, usando jQuery, me encuentro usando una y otra vez en distintos proyectos. Una de las ventajas de jQuery es la abundancia de plugins disponibles, pero normalmente éstos son más avanzados de lo que necesito y en algunos casos prefiero escribir estos “microplugines” que soluciones casos muy concretos y al mismo tiempo comunes.

El caso

Quieres uno o más links que despliegue un elemento escondido en la página, o lo esconda si el elemento está visible (por ejemplo un link “ver más”).
El efecto debe ser accesible: sin javascript, el browser debe simplemente mostrar el elemento normalmente y el link debe ser un “ancla” a éste. El caso es similar a un ejemplo publicado tiempo atrás para MooTools.

Code (javascript)
  1.  
  2. <a href="#contenido" class="js_collapse">Mostrar o esconder</a>
  3.  
  4. <div id="contenido">
  5. Mostrar o esconder este contenido al presionar el ancla de arriba.
  6. </div>
  7.  

El código

Code (javascript)
  1.  
  2. (function($){
  3.   $.fn.toggleTarget = function(){
  4.     $(this).click(function(){
  5.       var target = $($(this).attr(‘href’));
  6.       target.toggle(‘fast’);
  7.       return false;
  8.     });
  9.   }
  10. })(jQuery);
  11.  

Uso

Code (javascript)
  1.  
  2. $(function(){
  3.   $(‘a.js_collapse’).toggleTarget();
  4. });
  5.  

La mayoría de estas utilidades las tengo bajo control de versiones en mi Github. Sientanse libres de hacer un fork y contribuír.

Link: jQuery patterns en Gihub.

Este artículo fue publicado en 22/9/2008 a las 6:23 pm y está archivado bajo artículos, javascript, jquery. Puedes seguir esta discusión a través de su canal RSS 2.0. También puedes enviarlo a Digg para compartirlo con más lectores.

7 comentarios para “Patrones jQuery: toggleTarget”

  1. GravatarRodrigo Dice:
    1/5/2009 at 9:35 pm

    Porque no hacer:

    $(‘a.js_collapse’).click(function(){
    var target = $($(this).attr(‘href’));
    target.toggle(‘fast’);
    return false;
    });


    de frenton?

  2. GravatarJamd Dice:
    3/30/2009 at 7:02 pm

    Rodrigo, yo creo que no es lo mas óptimo, ya que si implemento tener esa función en varias paginas distintas.

    imaginate que necesito cambiar la velocidad y quiero que todas las paginas que hice tengas la misma velocidad por ejemplo a mi jefe no le gusto que apareciera tan rapido y necesito cambiar:
    target.toggle(‘fast’); a
    target.toggle(‘slow’);
    ¿Que pasaria con tu codigo?
    Tendria que cambiar cada js donde ingrese directamente la funcion.
    En cambio asi como lo hizo ismael solo cambias la funcion principal.

    Además reutilizamos código, y ahorramos un par de bytes.
    No crees?

    Una humilde opinion

  3. GravatarSuggiero Dice:
    4/7/2009 at 1:56 pm

    Muy bueno,
    creo q tiene razón rodrigo,

    saludos

  4. GravatarLuis Dice:
    3/23/2010 at 2:42 pm

    hola¡
    tengo un problema con mootools espero que alguien pueda ayudarme ¡

    Lo que pasa es que tengo unos ciclos donde despliego
    varios sistemas diferentes uno de compras , ventas , mercadotecnia etc , y ese sistemas tienen entidades osea los manejan varian empresas los mismos sistemas
    y de ahi seleccionas para que empresas kieres osea las entidades son link , usando el efecto slidein estoy desplegando las entidades al poner el mouseover en el sistema pero mi problema esk kiero k al cambiar de sistema m despliegue las entidades de este nuevo sistema y m oculte las entidades del anterior , use el slideout pero kiero k m lo oculte al yo salir del TR (osea del renglon no del sistema ) y ademas en IE m mueve mucho la pantalla y firefox me lo acomoda mejor k m sugieren
    o es mejor k use Jquery

  5. GravatarCheapsoftware Dice:
    8/17/2010 at 6:40 am

    Roxio Toast 10 Titanium for mac oem worldwide

  6. Gravatarmcdonalds monopoly Dice:
    1/17/2011 at 4:52 pm

    I would like to thank you for the efforts you have made in composing this article. I am going for the same best work from you in the future as well. In fact your fanciful writing abilities has prompted me to start my own blog now. Actually the blogging is spreading its wings rapidly. Your write up is a fine example of it.

  7. GravatarTeaching Letters and Sounds Dice:
    2/26/2011 at 6:14 pm

    Hello,

    This is a very good post however I’m glad I found your article.
    Whether you can give me more detailed information about this topic ?

    Thanks!

    Patricia