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

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

Читайте также:

Игра Угадай число на JavaScript!
Html таблица на JavaScript
Сортировка пузырьком на JavaScript
Движущаяся машина на JavaScript!
Генератор случайных картинок на JavaScript!
Как изменить фон страницы на JavaScript
Виртуальная клавиатура на javascript!
Как создать слайд шоу на javascript?

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

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

* Ваше имя:

Ваш e-mail:

*