Фильтрация блоков с помощью jQuery

В сегодняшнем уроке я покажу Вам как с помощью простого jQuery скрипта можно фильтровать данные (блоки).

Подобный урок у нас уже был ранее с фильтрацией работ в портфолио. Сегодняшний пример также заслуживает внимания.

Идея совсем простая. У Вас есть длинный список или набор "блоков" на странице. Каждый блок принадлежит определенной группе. Вверху страницы находится меню (навигация), которая позволяет переключаться между группами или же показывать все группы одновременно.

HTML

У каждого блока есть имя класса, которое указывает на определенную группу. Ниже представлены два примера. Оба принадлежат к группе “all” + верхний также принадлежит к группе “adv”, нижний - “cla”.

<div class="all adv">
<img src="images/flavor-curry.jpg" alt="" />
<h4>Sweet Curry With Saffron</h4>
<p>Lusciously mellow with notes of overripe berries, 55% Hawaiian dark chocolate meets its soulmate in sweet curry - awash in spices including coriander, tumeric, cumin and cardamom and sprinkled with rare saffron. This spicy melange is slowly steeped in fresh coconut puree and gently blended with the chocolate. The taste rushes over you in waves - fragrant curry, chased by coconut, then the lingering, raisiny sweetness of chocolate. Available in <a href="/store/products/Chocolatier_s_Choice-5-2.html">Chocolatier's Choice</a> and <a href="/store/products/Adventurous_Collection-3-2.html">Adventurous Collection</a>.</p>
</div>

<div class="all cla">
<img src="images/flavor-vanilla.jpg" alt="" />
<h4>Lucille's Vanilla </h4>
<p>For those who prefer milder chocolate, this winsome truffle will ignite a lifelong love affair. Gail uses a dark blend in this recipe handed down through four generations of the Guittard family of chocolate makers. It tastes like a rich spoonful of homemade chocolate pudding - just like Gail's mom, Lucille, made on the stovetop in their family farm's kitchen. Available in <a href="/store/products/Chocolatier_s_Choice-5-2.html">Chocolatier's Choice</a> and <a href="http://gailambrosius.com/store/products/Classic_Collection-2-2.html">Classic Collection</a>.</p>
</div>

В навигации вставлен атрибут REL с соответствующими классами:

<div id="flavor-nav">
    <a rel="all" class="current">All</a>
    <a rel="cla">Classic</a>
    <a rel="adv">Adventurous</a>
    <a rel="tea">Tea-Inspired</a>
</div>

jQuery

План таков:

1. При нажатии на ссылку с необходимым классом...
2. Все блоки немного затемняются (показывает юзеру, что что-то происходит)
3. Убирается класс “current” со всех элементов навигации и присваивается тому, на который нажали
4. Выясняем какая группа должна появится (по атрибуту REL)
5. Все "лишние" блоки пропадают
6. Все нужные остаются
7. Убирается затемнение блоков

Все это происходит очень быстро.

За все это отвечает следующий код:

$(function() {

	var newSelection = "";

	$("#flavor-nav a").click(function(){

	    $("#all-flavors").fadeTo(200, 0.10);

		$("#flavor-nav a").removeClass("current");
		$(this).addClass("current");

		newSelection = $(this).attr("rel");

		$(".flavor").not("."+newSelection).slideUp();
		$("."+newSelection).slideDown();

	    $("#all-flavors").fadeTo(600, 1);

	});

});

Вот и все готово! Наслаждайтесь, уважаемые посетители!