В примере реализован jQuery фильтр, который можно использовать для сортировки/фильтрации практически любых элементов (включая изображения, списки, фото, и т.д.). Возможности для применения данного фильтра достаточно широкие.
Сортировка элементов создана с помощью простого скрипта, для работы которого необходимо обязательно подключить библиотеку jQuery.
Если у вас есть вопросы, задавайте в комментариях.
ДемоHTML
<h2>Фильтрация элементов с помощью jQuery</h2> <p> <button class="f-red">Фильтр красных элементов</button> <button class="f-blue">Фильтр синих элементов</button> <button class="f-green">Фильтр зеленых элементов</button> <button class="f-all">Все элементы</button> </p> <div class="red">Первый</div> <div class="red">Второй</div> <div class="blue">Третий</div> <div class="green">Четвертый</div> <div class="red">Пятый</div> <div class="blue">Шестой</div> <div class="blue">Седьмой</div> <div class="green">Восьмой</div>
CSS
body { padding: 10%; font-family: sans-serif; } button { padding: 1em; border: 0; margin: 0.25em; color: #fff; cursor: pointer; } .f-red { background: #ff4136; } .f-red:hover { background: #e90d00; } .f-green { background: #2ecc40; } .f-green:hover { background: #208e2c; } .f-blue { background: #0074d9; } .f-blue:hover { background: #004b8c; } .f-all { background: #333; } .f-all:hover { background: #0d0d0d; } .red, .green, .blue { color: #fff; padding: 1em; margin-bottom: 0.25em; } .red { background: #ff4136; } .green { background: #2ecc40; } .blue { background: #0074d9; }
JS
<script src="http://code.jquery.com/jquery-1.11.1.js"></script> <script type="text/javascript"> var fActive = ''; function filterColor(color){ if(fActive != color){ $('div').filter('.'+color).slideDown(); $('div').filter(':not(.'+color+')').slideUp(); fActive = color; } } $('.f-red').click(function(){ filterColor('red'); }); $('.f-blue').click(function(){ filterColor('blue'); }); $('.f-green').click(function(){ filterColor('green'); }); $('.f-all').click(function(){ $('div').slideDown(); fActive = 'all'; }); </script>
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
Элементы сворачиваются вместе со всей страницей, остается только body c фоном
Т.е. скрипт сворачивает все дивы которые есть на странице
Ну как бы, это разумно. Он у тебя на div и указан, вот и сворачивает все.
$(‘div’).filter(‘.’+color).slideDown();
$(‘div’).filter(‘:not(.’+color+’)’).slideUp();
Как сделать, чтобы открывалось сначала не сразу все, а уже только красные.
если я хочу задать ссылку с другой страницы на сразу отфильтрованный блок.
спасибо большое!
В данном примере сделать такой якорь нет возможности.
Это значит что пример — говно, а строка «возможности для применения данного фильтра достаточно широкие» — брехня.
Если Вы не знаете где можно использовать данный пример, не значит что таких примеров нету 🙂
Игорь, так в чём дело — прояви талант, напиши как надо, а я записывать буду
Скачать дайте готовый пример!!!
Так вообще не работает!!! если вставить в обычный файл нормальный!
И сворачивает реально все дивы. Что за сумасшествие! Что за пример!! Надо понимать, что на странице кроме дивов в элементами фильтра будут и другие!!! Как сделать нормально что бы работал, что бы сворачивал только фильтруемые элементы??!!
Да почему он скрывает ВСЕ дивы на странице а??! Я всю ночь голову ломать должен теперь над этим??! Как сделать НОРМАЛЬНЫЙ фильтр, который будет скрывать только нужные элементы??!!
Здравствуйте. Не ломайте голову, переделал специально для Вас — https://codepen.io/anon/pen/xZXwbm
В примере скрывает только те дивы, в которых добавлен еще один класс sort.
https://codepen.io/anon/pen/xZXwbm
На 10й строке ‘div’ нужно тоже заменить на ‘.sort’, а то all не работает. А так, спасибо, как раз пригодилось )
Здравствуйте!
Вам — огромное спасибо! Вы прекрасный человек!! Откликнулись в беде!
Но изначально предложенный вариант фильтр здесь — действительно не до конца продуманное решение, Ведь на сайте всегда будут дрeubt div’ы. Тот вариант что вы доработали — то что нужно! Но, можно сделать еще практичнее — сделать поиск фильтруемых элементов не по доп. классу (.sort). а ВНУТРИ родителя с доп. классом. Это было бы самое красивое решение. Здорово было бы увидеть его, и, заменить им представленный пример в статье, как вариантом наиболее качественным!
Спасибо вам за то, что делитесь наработками!!
Спасибо! Очень помог!
Здравствуйте,как можно изменить анимацию?
Как реализовать автоматическое применение одного из фильтров?