Patrones jQuery: toggleTarget
Visita este artículo en http://www.estadobeta.com/2008/09/22/patrones-jquery/
Por Ismael en artículos, javascript, jqueryHace 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.
-
-
<a href="#contenido" class="js_collapse">Mostrar o esconder</a>
-
-
<div id="contenido">
-
Mostrar o esconder este contenido al presionar el ancla de arriba.
-
</div>
-
El código
-
-
(function($){
-
$.fn.toggleTarget = function(){
-
$(this).click(function(){
-
var target = $($(this).attr(‘href’));
-
target.toggle(‘fast’);
-
return false;
-
});
-
}
-
})(jQuery);
-
Uso
-
-
$(function(){
-
$(‘a.js_collapse’).toggleTarget();
-
});
-
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.
- Servicios:
- Comentarios RSS
- Menear!
- Del.icio.us
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?
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
4/7/2009 at 1:56 pm
Muy bueno,
creo q tiene razón rodrigo,
saludos