Приветствую вас дорогие друзья! В этом уроке я покажу, как сделать сортировку каких-либо элементов самым простым способом!
Данная сортировка очень удобна, так как не нужно ждать перезагрузки страницы.
Как и всегда, в конце имеется наглядный пример, а также все исходные файлы данной статьи, которые вы можете скачать к себе на компьютер!
В нашем примере будет три выдуманных рубрики, в которых будут находиться квадратные элементы:
- Красные
- Синие
- Зеленые
А также будет такая кнопочка, как – “Все”, нажав на которую, соответственно будут показаны элементы из всех рубрик.
Чтобы было понятно, где может применяться данная сортировка, представьте, что вы находитесь в интернет-магазине и рубрики называются, например, так:
- Планшеты
- Ноутбуки
- Телефоны
А в качестве элементов будут соответствующие товары.
Теперь давайте рассмотрим пример реализации!
HTML код:
<div class="wrap"> <p id="all">Все</p> <p id="red">Красные</p> <p id="blue">Синие</p> <p id="green">Зеленые</p> <div class="red"></div> <div class="blue"></div> <div class="green"></div> <div class="red"></div> <div class="blue"></div> <div class="red"></div> <div class="green"></div> <div class="red"></div> <div class="green"></div> <div class="blue"></div> <div class="green"></div> <div class="red"></div> <div class="blue"></div> <div class="red"></div> <div class="blue"></div> <div class="red"></div> </div>
В обёртке “Wrap” 4 кнопки оформлены в тег “p”, после них идут div блоки с соответствующими классами, то есть для изменения цвета блока достаточно изменить его класс.
CSS стили:
.wrap{ width: 540px; margin: 30px auto; background: #fff; padding: 20px; border-radius: 10px; } .wrap div{ width: 100px; height: 100px; background: red; border-radius: 10px; float: left; margin: 10px; } #red,#blue,#green,#all{ float: left; margin: 0 20px; cursor: pointer; color: #fff; background: #444; padding: 4px 10px; } .blue{ background: blue !important; } .green{ background: green !important; }
Строка – “.wrap div” устанавливает стили (высоту, ширину, отступы и так далее) для всех блоков, и по умолчанию все они имеют красный фон.
Далее, классы для синего и зеленого блоков наследуют родительские стили, а также принудительно (!important) принимают синий и зеленый фон соответственно.
JQuery код:
$(document).ready(function(){ $('.wrap p').click(function(){ color = $(this).attr('id'); if( color != 'all' ){ $('.wrap div').hide(200); $('.wrap div.' + color).show(200); }else $('.wrap div').show(200); }); });
Здесь мы выбираем наши кнопки (тег p) и по клику определяем текущий идентификатор (сохраняя в переменную – color) – если мы нажали на “Все”, то показываем все элементы.
Иначе, если выбрана определенная рубрика, то сначала скрываем абсолютно все элементы, а после показываем только нужные, передав id нажатой кнопки в выборку.
У методов – “show” и “hide”, для создания плавности, устанавливаем задержку в 200 миллисекунд.
Вот так вот просто реализуется подобная сортировка!
На этом у меня всё, желаю вам удачи, пока!
Demo пример
Скачать исходники
Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.