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

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

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

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

demosourse

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);

	});

});

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.css-tricks.com
Перевел: Максим Шкурупий
Урок создан: 11 Января 2010
Просмотров: 38729
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 12 Января 2010 00:13
    НеБот
    Ничё так
  • 12 Января 2010 11:14
    Женек
    Прикольненько :)
  • 12 Января 2010 16:31
    Руслан
    Простенько, быстренько и эффективненько =)
  • 14 Января 2010 02:24
    Alexxhub
    Классно что без нагрузки на базу. Раз загрузили и радуемся. Переписать что-ли админ-блок?! а то фильтрация уж очень жестко базу нагружает :)
  • 14 Января 2010 12:12
    МаксимШкурупий
    Тут вообще нет базы. Только html, css, jquery.
  • 14 Января 2010 14:41
    egvimar
    Во всех IE работает некорректно, а именно некорректно отображает шрифт после фильтрации.
  • 14 Января 2010 16:08
    Dimka
    нафиг ненужно загружать страницу всякими js ... я понимаю что красиво но в разных браузерах по разному показуется и люс еще что страница больше весит
  • 17 Апреля 2010 12:45
    kIm
    Кто-нибудь подскажет, а что если блоку придать 3-4 класса, сделать расширенный фильтр. Например: <div class="all adv class id"> Думаете прокатит?
  • 24 Апреля 2010 02:42
    dmisky
    О, какая удобная штукенция, как раз такую мне и надо, только вот вопрос - как сделать, чтобы при первой загрузке появлялся не весь каталог из всех позиций, а только определённый, характерный для каждой позиции??? Надо срочно
  • 6 Июня 2010 21:58
    Gravitator
    У меня когда пишешь на русском вместо букв появляются вопросы.У кого есть ещё подобная проблема?
  • 16 Июня 2011 15:40
    arzlobin
    Подскажите, пожалуйста, как можно задать внешнюю ссылку на конкретный фильтр? Например, мне нужно, чтобы человек с другой страницы перешел на страницу со списком, но к списку применился определенный фильтр. Каким образом можно задать ссылку?
  • 29 Ноября 2012 15:56
    lukovoy
    Скажите пожалуйста, а как реализовать фильтрацию не по имени,а по числовому значению, от большего к меньшему?
  • 10 Ноября 2015 11:52
    katefan
    Интересует вопрос, что и dmisky. Как сделать при первой загрузке показ не всех позиций, а конкретной?
  • 10 Ноября 2015 14:01
    katefan
    А еще такой вопрос, как сделать preloader блока, когда изменяем фильтр и ждем пока нужные элементы появятся?
^ Наверх ^