Как сделать плавную сортировку элементов по рубрикам на javascript (jquery)

Приветствую вас дорогие друзья! В этом уроке я покажу, как сделать сортировку каких-либо элементов самым простым способом!

Как сделать плавную сортировку элементов по рубрикам

Данная сортировка очень удобна, так как не нужно ждать перезагрузки страницы.

Как и всегда, в конце имеется наглядный пример, а также все исходные файлы данной статьи, которые вы можете скачать к себе на компьютер!

В нашем примере будет три выдуманных рубрики, в которых будут находиться квадратные элементы:

  1. Красные
  2. Синие
  3. Зеленые

А также будет такая кнопочка, как – “Все”, нажав на которую, соответственно будут показаны элементы из всех рубрик.

Чтобы было понятно, где может применяться данная сортировка, представьте, что вы находитесь в интернет-магазине и рубрики называются, например, так:

  1. Планшеты
  2. Ноутбуки
  3. Телефоны

А в качестве элементов будут соответствующие товары.

Теперь давайте рассмотрим пример реализации!

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 пример

Скачать исходники

Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.