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

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

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

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

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

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

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

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


Хостинг, которым я пользуюсь: Good-Host


Похожие статьи

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>