Как сделать плавную сортировку элементов по рубрикам на 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 пример Скачать исходники


Раздел: Программирование

Дата последнего изменения: 2015-11-11 19:37:26

Просмотров: 11364

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

* Комментарий: (отменить ответ)

* Ваше имя:

Ваш e-mail:

*