Hace unos días andaba buscando alguna solución que cuadrase para la interfaz de la zona de clientes de la web de The Cocktail. Los requerimientos eran fáciles: teníamos una lista de proyectos tagueados con el sector al que pertenecen (ocio, servicios financieros, educación) y con las áreas que han intervenido (front, back, marketing, hci...) y teníamos que poder filtrarlos combinando ambos parámetros.

Sin rascar demasiado encontré filterable, y la verdad a simple vista parecía cuadrar así que me guardé el enlace y seguí trabajando. Cuando me tocó ponerme manos a la obra entendí que filterable sólo me iba a servir como inspiración para empezar a trabajar.

Ya con el filtro de The Cocktail hecho empecé a pensar que seguro que podía hacerlo un poquito más genérico y darle un poquito más de alma. El resultado es jquery.filterprojects, un plugincillo que facilita esta tarea y que no está especialmente atado a la sintaxis de tu html.

Puedes personalizar unas cuantas cosillas:

  • filterTagSelector: Debe de ser un array con una colección de enlaces cuyo href sea el tag a filtrar (href="#enanos-de-jardin")
  • animationSpeed (900): Puedes ajustar la duración de la animación que se va a ejecutar al filtrar
  • animationPulse (100): Esto me encanta :) Es el tiempo que va a dejar entre el comienzo de cada animación, hace el efecto menos mecánico. Si prefieres todo al mismo tiempo pon un 0.
  • animationEase ("linear"): puedes usar también "swing" o instalar cositas extra para poder aplicárselo al animate.
  • activeClass ("active"): Qué clase vas a usar en los selectores de filtrado cuando esté la clase activa.
  • allTag ("all"): Es el tag que queremos usar en los selectores de filtrado para decir que seleccione todos los tags del grupo
  • randomize (true): Hace que al filtrar los elementos estos aparezcan y desaparezcan en ordern aleatorio. Si tenemos animationPulse a 0 no se nota nada :)
  • show: ({ width: 'show', opacity: 'show' }): parámetros para mostrar los elementos, basados en los necesarios para animate.
  • hide: ({ width: 'hide', opacity: 'hide' }): parámetros para ocultar los elementos, basados en los necesarios para animate.

Y la sintaxis es facilita:

 
 $("#posts").filterprojects({  
    animationSpeed: 1000,  
    animationPulse: 80,  
    randomize: false,  
    show: { height: 'show' },  
    hide: { height: 'hide' },  
    filterTagSelector: [ '#issues a' ]  
  });

Pero como esto es mucho más fácil verlo que contarlo (como siempre) échale un vistazo a estas demos o descárgatelo en github. Durante los próximos días le casco unos tests, le paso la podadora y le amplio la documentación.

Me lo disfruten :)