От автора: очень часто на страницах сайта необходимо отображать большое количество различных элементов, что значительно затрудняет поиск необходимой информации пользователю. В этом случае, обязательно необходимо предусмотреть механизм фильтрации и сортировки элементов по общим признакам, поэтому в данном уроке мы рассмотрим плагин для библиотеки jQuery под названием MixItUp, который поможет Вам реализовать эффектную и анимированную фильтрацию контента. Функционал плагина достаточно велик, но при этом он очень прост в использовании и настройке.
Установка плагина MixItUp
Для начала перейдем на официальный сайт разработчика плагина MixItUp jQUery.
В левой открывающейся боковой панели, содержится ссылка для скачивания последней актуальной версии плагина. Поэтому щелкаем по данной ссылке и сохраняем архив в директорию хранения скриптов языка JavaScript. Распаковав скачанный архив, из каталога src, копируем в корень файл jquery.mixitup.js – это и есть интересующая нас библиотека, которую, далее необходимо подключить к сайту.
Теперь обратите внимание на тестовый сайт, который будет использоваться для данного урока.
Исходный код файла index.html, который формирует данную страницу.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <meta name="" content=""> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/style.css"/> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div class="wrap"> <div class="karkas"> <h1> MixItUp </h1> <div class="controls"> <label>Фильтр:</label> <button class="filter" >All</button> <button class="filter" >Категория 1</button> <button class="filter" >Категория 2</button> <button class="filter" >Категория 3</button> <br /> <br /> <label>Сортировка:</label> <button class="sort" >Прямая</button> <button class="sort" >Обратная</button> </div> <div id="Container" class="container"> <div class="mix category-1" >1</div> <div class="mix category-3" >2</div> <div class="mix category-1" >3</div> <div class="mix category-2" >4</div> <div class="mix category-1" >5</div> <div class="mix category-1" >6</div> <div class="mix category-3" >7</div> <div class="mix category-2" >8</div> </div> </div> </div> </body> </html> |
Как Вы видите, я уже подключил библиотеку jQuery, из удаленного сервиса и пустой файл script.js, в котором мы будем вести кодирование на языке JavaScript.
Так же подключен файл style.css, который содержит правила CSS для данной страницы.
Обратите внимание, что элементы, к которым в будущем будет применена фильтрация и сортировка — это блоки div с классом mix, которые вложены в элемент div с идентификатором Container. Так же выше указанным элементам добавлен класс, по которому будет осуществляться фильтрация. К примеру, у нас есть три категории, соответственно принадлежность к каждой категории определенного блока, определяют классы category-1, category-2 и category-3. Они же и будут использоваться для фильтрации элементов (то есть плагин, будет осуществлять выборку данных элементов).
Блоки button с классами filter и sort – это элементы управления фильтрацией и сортировкой соответственно. Определившись с разметкой – подключаем скачанный плагин к странице:
1 |
<script type="text/javascript" src="js/jquery.mixitup.js"></script> |
Для корректной работы плагина, блоки с классом mix, должны быть скрыты, то есть для данных блоков используем правило CSS display, со значением none (в исходных материалах к данному уроку Вы сможете увидеть полный код файла со стилями). На этом установка плагина завершена.
Работа с плагином
Теперь, открываем файл script.js, и добавим следующий код:
1 2 3 4 5 |
$(function(){ $("#Container").mixItUp({ }); }); |
То есть при помощи библиотеки jQuery выбираем блок с идентификатором Container, в котором расположены элементы для фильтрации и вызываем на исполнение метод mixItUp(), таким образом, запускаем плагин в работу.
На данном этапе, можно обновить информацию в браузере и мы увидим, что интересующие блоки отображаются на экране с определенной анимацией, а это значит что мы на верном пути.
Теперь в файле index.html, к элементам button, которые будут управлять фильтрацией блоков, необходимо добавить специальный атрибут data-filter, в значении которого указать класс, тех блоков, которые будут отображены на экране. То есть данный атрибут это параметр фильтрации. Код элементов button, для фильтрации будет выглядеть следующим образом:
1 2 3 4 5 |
<label>Фильтр:</label> <button class="filter" data-filter="all">All</button> <button class="filter" data-filter=".category-1">Категория 1</button> <button class="filter" data-filter=".category-2">Категория 2</button> <button class="filter" data-filter=".category-3">Категория 3</button> |
Специальное значение атрибута data-filter – all, сбрасывает условие фильтрации и необходимо для отображения всех элементов на экране.
Для сортировки элементов, к каждому из них, необходимо добавить специальный атрибут data-name, где name – это имя параметра, сортировки, которое необходимо для работы элементов управления. К примеру, давайте создадим атрибут data-myorder. Значение данного атрибута – это порядок сортировки конкретного элемента. То есть конечный вариант блоков, которые подлежат сортировке, будет следующий:
1 2 3 4 5 6 7 8 9 10 |
<div id="Container" class="container"> <div class="mix category-1" data-myorder="1">1</div> <div class="mix category-3" data-myorder="2" >2</div> <div class="mix category-1" data-myorder="3">3</div> <div class="mix category-2" data-myorder="4">4</div> <div class="mix category-1" data-myorder="5">5</div> <div class="mix category-1" data-myorder="6">6</div> <div class="mix category-3" data-myorder="7">7</div> <div class="mix category-2" data-myorder="8">8</div> </div> |
Для элементов управления сортировкой, необходимо добавить атрибут data-sort, в значении которого, указываем параметр сортировки и направление сортировки.
1 2 3 4 |
<label>Сортировка:</label> <button class="sort" data-sort="myorder:asc">Прямая</button> <button class="sort" data-sort="myorder:desc">Обратная</button> |
Теперь можно проверить результаты работы в браузере.
Основные настройки плагина
Настройки MixItUp разделены на отдельные группы, и полный их список приведен на странице документации.
Группа настроек отвечающих за выборку элементов:
1 2 3 4 5 6 7 8 9 |
$(function(){ $("#Container").mixItUp({ selectors: { target:'.mix', filter:'.filter', sort:'.sort' } }); }); |
Используемые настройки:
target:’.mix’ – селектор элемента который будет выбран для фильтрации и сортировки;
filter:’.filter’ – класс элемента управления, который будет выполнять фильтрацию, по указанным параметрам;
sort:’.sort’ — класс элемента управления, который будет выполнять сортировку, по указанным параметрам;
1 2 3 4 5 6 7 8 |
$(function(){ $("#Container").mixItUp({ load: { filter:'.category-2', sort:'myorder:desc' } }); }); |
Группа параметров начальных уставок:
filter:’.category-2′ – начальная фильтрации элементов при загрузке страницы;
sort:’myorder:desc’ – начальная сортировка элементов, при загрузке страницы.
1 2 3 4 5 6 7 8 |
$(function(){ $("#Container").mixItUp({ controls: { enable:true, activeClass:'on' } }); }); |
Группа настроек элементов управления:
enable:true – если передать true, элементы управления будут включены;
activeClass:’on’ – класс, который будет добавляться активному элементу управления.
1 2 3 4 5 6 7 8 9 |
$(function(){ $("#Container").mixItUp({ animation: { enable:true, effects:'scale fade', duration:700 } }); }); |
Группа настроек анимационных эффектов:
enable:true – если передать false, анимация будет запрещена;
effects:’scale fade’ – анимационные эффекты, которые будут применяться к выбранным элементам. Поддерживаемые значения: fade, scale, translateY, translateZ, rotateX, rotateY, rotateZ, stagger, translateX;
duration:700 – скорость в миллисекундах, выполнения анимационных эффектов.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(function(){ $("#Container").mixItUp({ callbacks: { onMixLoad:function(state) { //kod }, onMixStart:function(state) { //kod }, onMixEnd:function() { //kod } } }); }); |
Параметры обработчиков событий, благодаря которым возможно описать функцию, код которой выполнится при срабатывании события:
onMixLoad – параметр, который позволяет описать функцию, код которой выполнится при срабатывании события MixLoad – загрузка плагина на странице;
onMixStart — параметр, который позволяет описать функцию, код которой выполнится при срабатывании события MixStart – начало выполнения одного из действий (фильтрации или сортировки);
onMixEnd — параметр, который позволяет описать функцию, код которой выполнится при срабатывании события MixEnd – завершение одного из действий (фильтрации или сортировки).
На этом данный урок завершен. Мы рассмотрели только основные настройки плагина MixItUp, если Вас заинтересовал данный плагин, то на странице документации, Вы найдете подробное описание не рассмотренных нами настроек, а также информацию по MixItUp API.
Всего Вам доброго и удачного кодирования!!!
Комментарии (4)