Filtrar contenidos con jQuery Blog de Martin Iglesias

Filtrar contenidos con jQuery

Escrito por Martín Iglesias y leído 2,798 veces. Ver comentarios

30MAYO/2011

Este pequeño código sirve para mostrar filtros por categorías sobre el contenido mostrado en pantalla. Es decir, si tienes, por ejemplo, un portfolio de trabajos y quieres que el usuario pueda filtrar por categorías, este código te ayudará a hacerlo.

El proceso es muy sencillo, debes mostrar tu contenido en el formato que quieras, pero separando ya sea en un div, un tr, un li o lo que quieras cada uno de ellos, porque deberás asignarle como class, el título de la categoría a la que pertenece (que puede ser una o varias).

Luego, deberás crear una lista desordenada, vamos, un UL de toda la vida, con, precisamente, esas categorías para que el código javascript y la librería jQuery hagan el resto.

Sé que explicándome soy un queso (uhh que frase más antigua usé), en la imagen que te dejo aquí arriba, si ves los links recuadrados en blanco, te darás cuenta de lo que quiero decir. Hay un menú con categorías que se encargará de ir escondiendo todo el contenido, dejando solo en pantalla aquellos elementos que pertenezcan a la categoría seleccionada.

Cómo se hace?
Si llegaste hasta aquí, bien por ti, quiere decir que no te dormiste leyendo lo anterior... por eso, te mereces el código porque es más sencillo de hacer que de contar. Vamos a ello...

El proceso es muy fácil, primero, un pequeño javascript (ver código 1) que marcará las opciones. Como segundo requisito, necesitarás un poquito de xhtml y los elementos necesarios son:

Una lista desordenada para las categorías (en el código 2, con id ´filter´).
Otra lista desordenada para los elementos a filtrar (en el código 3, con el id ´portfolio´).

Luego de ésto, a cada uno de los elementos de la lista portfolio, le pondremos como class, lo que escribamos en cada uno de los li de la lista filter (para ello, deberás tener especial cuidado en los espacios, acentos y demás caracteres).

Y listo. No necesitas nada más para hacer filtros de contenido según distintas opciones con jQuery. Que lo disfrutes ;)

Código 1 - JAVASCRIPT

$('ul#filter a').click(function() {
				$(this).css('outline','none');
				$('ul#filter .current').removeClass('current');
				$(this).parent().addClass('current');
		
				var filterVal = $(this).text().toLowerCase().replace(' ','-');
				
				if(filterVal == 'todos') {
					$('ul#portfolio li.hidden').fadeIn('fast').removeClass('hidden');
				} else {
					$(ul#portfolio li').each(function() {
					if(!$(this).hasClass(filterVal)) {
						$(this).fadeOut('normal').addClass('hidden');
					} else {
						$(this).fadeIn('fast').removeClass('hidden');
					}
				});
				return false;
				}
			});

Código 2 - HTML

<ul id='filter'>
<li class='current'>
<a href='#'>Todos</a></li>
<li><a href='#'>Web</a></li>
<li><a href='#'>Print</a></li>
<li><a href='#'>Logos</a></li>
</ul>

Código 3 - HTML

<ul>
<li class=Web"><img src="foto1.jpg" /></li>
<li class=Web Print Logos"><img src="foto2.jpg" /></li>
<li class=Web Logos"><img src="foto3.jpg" /></li>
<li class=Print"><img src="foto4.jpg" /></li>
</ul>

Acerca del Autor:

Diseñador web freelance en Coruña Galicia | Martin Iglesias

Martín Iglesias, diseñador web freelance de A Coruña, especializado en maquetación css y desarrollo de páginas web a medida con más de 15 años de experiencia en el desarrollo de páginas web profesionales.

Si te ha gustado este artículo, por favor, ayúdame a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Filtrar contenidos con jQuery

Acerca del Autor:

Artículos relacionados: