Совет: вручную сортируемые списки с помощью Flexbox и jQuery

Совет: вручную сортируемые списки с помощью Flexbox и jQuery

От автора: в этой статье мы пошагово разберем, как создать простой jQuery плагин, который будет сортировать элементы по значениям пользовательских data-атрибутов.

Любопытные могут сразу посмотреть конечный результат в CodePen демо:

Замечание: статья предполагает наличие базового понимания flexbox, а также умения разрабатывать плагины на jQuery. Если данные темы вам не знакомы, перейдите по соответствующим ссылкам.

Вопросы доступности

Для создания плагина мы воспользуемся преимуществами flexbox. По умолчанию флекс ячейки выстраиваются в исходном порядке. С помощью свойства order мы можем изменить этот порядок внутри флекс контейнера. Элементы с меньшим значением order появляются раньше. Смотрите пример ниже:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Если у нескольких элементов задано одно значение order, их очередность определяется исходным порядком.

Свойство order позволяет легко сортировать элементы, однако оно несет в себе определенные ограничения по доступности: данное свойство разрывает исходный порядок и визуальный. Чтобы лучше понять суть проблемы, прочтите эту статью (особенно раздел Source Order vs. Visual Order).

Прежде чем перейти к созданию плагина вам важно понять, что он не будет доступным.

Разметка

Для начала пропишите неупорядоченный список из 12 элементов:

Обратите внимание, что в каждом элементе списка есть блок .details, в котором хранится информация о соответствующем элементе списка. Чуть ниже мы также добавим пользовательские HTML атрибуты, в которых будем хранить информацию.

Замечание: элемент .details необязателен. Мы используем его лишь для того, чтобы лучше понять принцип сортировки целевых элементов.

Далее мы задаем атрибуты, по которым будет производиться сортировка. У нас это атрибуты price и length. Мы используем их имена в пользовательских атрибутах (data-price и data-length) элементов списка. Значения этих атрибутов будут совпадать с текстовыми значениями (только цифры) элементов .length и .price, которые расположены в блоке .details.

Например, атрибуты для первого элемента в списке:

Теперь необходимо указать элементы, с помощью которых будет производиться сортировка. Для этого мы возьмем тег select:

Как вы могли заметить, у всех тегов

У нас есть атрибут со значением, по которому необходимо произвести сортировку. После значения стоит двоеточие, и следует индикатор «asc» или «desc».

Стили CSS

Наша разметка готова, теперь давайте добавим базовые стили на нашу страницу. Нам необходимо превратить неупорядоченный список в флекс контейнер и присвоить элементам списка ширину width: 25%. Соответствующие CSS стили:

Создание плагина

Назовем наш плагин numericFlexboxSorting. Прежде чем показать процесс создания, давайте начнем с конца и объясним, как инициализировать плагин.

Инициализация плагина

В двух словах, плагин инициализируется следующим образом:

В нашем случае так:

По умолчанию плагин будет сортировать элементы с классом .boxes li. Это можно изменить, переписав значение свойства elToSort.

Пошаговый разбор

А теперь мы можем перейти к описанию процесса разработки!

Во-первых, необходимо расширить прототип объекта jQuery ($.fn), добавив к нему метод numericFlexboxSorting:

Ключевое слово this в этом методе отсылает нас к тегу select. Как только мы создадим плагин, нам нужно будет возвращать этот тег. Если этого не делать, сцепка методов не сработает.

Разберем пример кода:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Если мы не вернем целевой элемент, метод css не сделает ровным счетом ничего.

Мы уже говорили, что плагин по умолчанию будет сортировать элементы с классом .boxes li. Нам нужна возможность изменять это поведение, если появится такая необходимость. Для этого мы воспользуемся jQuery методом extend:

Плагин будет сортировать числа по возрастанию и убыванию. Для этого необходимо создать соответствующие переменные, которые будут использоваться потом:

Как только пользователь выберет опцию из выпадающего списка (кроме первой), мы должны вытянуть и оценить ее значение. Для этого нам понадобится событие change:

Внутри обработчика события мы:

вытягиваем значение атрибута data-sort для выбранной опции (например, price:asc);

вызываем функцию sortColumns.

Функция sortColumns принимает два параметра:

элементы сортировки;

значение атрибута data-sort для выбранной опции.

Сама функция:

Разберем код функции:

В зависимости от атрибута сортировки (например, price или length) мы получаем значение соответствующего data-* атрибута для каждого целевого элемента и храним полученные значения в массиве. Кроме того, в зависимости от того, как пользователь хочет сортировать целевые элементы, мы сортируем массив по возрастанию или убыванию.

Проходимся в цикле по массиву, находим соответствующие элементы и присваиваем им свойство order со значением (положительным или отрицательным), которое определяется значением соответствующего data-* attribute. Например, если пользователь выберет price:asc, то элемент с data-price: 315 получит свойство order: 315.

Совет: вручную сортируемые списки с помощью Flexbox и jQuery

Если же пользователь выберет price:desc, то элемент получит свойство order: -315.

Совет: вручную сортируемые списки с помощью Flexbox и jQuery

И наконец, чтобы избежать конфликтов с другими библиотеками, использующими переменную $, мы обернем наш код в моментально выполняемую функцию:

Наш плагин готов. Посмотреть его в живую можно в CodePen демо ниже:

Ограничения в плагине

Пора вспомнить, что в нашем плагине есть одно большое ограничение: он не доступен. Чтобы проверить это, выберите опцию из выпадающего списка и нажмите клавишу на клавиатуре (кликните на блок и нажмите клавишу Tab) для перехода между ссылками. Обратите внимание, что элементы получают фокус по DOM порядку, а не CSS.

Совет: вручную сортируемые списки с помощью Flexbox и jQuery

Также наш плагин обеспечивает лишь базовый функционал, что ограничивает его работу только определенными условиями. Например, строка со значением атрибута должна содержать только числовое значение. Это значение определяет order (ожидает число) для целевых элементов.

В сети полно надежных и мощных библиотек для сортировки и фильтрации элементов: Isotope, MixItUp.

Поддержка в браузерах

В плагине используется flexbox, т.е. его поддержка зависит от поддержки flexbox в браузерах. К счастью, сегодня у flexbox замечательная поддержка.

Данные о поддержке flexbox в основных браузерах можно найти на Can I Use flexbox?

Следующие шаги

Любите сложности и хотите расширить функционал плагина? Тогда вы можете:

добавить поддержку случайной сортировки;

дать пользователю выбор в кнопке сортировки (тег select, несколько кнопок button или элемент другого типа). Для этого вам понадобятся дополнительные настройки:

Заключение

В этой статье мы прошли через весь процесс создания плагина на jQuery. Плагин использует возможности flexbox для сортировки элементов по значениям их data-атрибутов.

А что вы думаете? Использовали бы вы такое в будущем? Пытались ли вы как-то по-другому совместить JS и flexbox? Пишите в комментариях.

Автор: George Martsoukos

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Курс по NodeJS. Основы

Прямо сейчас посмотрите курс по NodeJS!

Смотреть курс

Метки:

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

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree