Revisando los diseños de formularios que últimamente pasan por mis manos no está de más revisitar las técnicas que nos permiten "poner bonito un input file".
Las más populares son la clásic de shaun inman, y una elaborada por Michael McGrady (según PPK). Por mi parte estoy mucho más de acuerdo esta última, aunque creo que si la vamos a usar varias veces en un proyecto necesitamos que sea un poquito más flexible.
He escrito un plugin pequeñito que hace el trabajo sucio y nos permite centrarnos en estilizar el input file falso y no en todo lo demás. Depende de jquery porque la mayoría del tiempo trabajo con este framework, pero sería fácil dejarlo limpio de dependencias.
Por el momento funciona, echadle un vistazo a la demo :)
El código fuente lo podéis encontrar en su correspondiente repositorio en github..
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 :)
