Накопилось много информации на сайте, и необходимо сделать фильтрацию элементов сгруппировав их в категории, тогда этот урок станет Вам интересен. Мы рассмотрим фильтрацию элементов с помощью плагина Quiksand, который используется для изменения порядка и сортировки списков с применением анимированной визуализации процесса перестановки. Подобный эффект используется в приложениях на Mac и производит очень приятное впечатление.

 

Плагин фактически производит замену одной коллекции элементов другой. Вам нужно предоставить для него данные наборы. Сделать это можно следующими способами:

  • Загрузить данные с помощью вызова AJAX
  • Трансформировать код HTML  с  помощью Javascript
  • Использовать HTML код, например, сделать неупорядоченные списки
Плагин использует jQuery Easing и плагин для вращения и масштабирования элементов  HTML. Набор подключений для Quiksand выглядит следующим образом:
Сам плагин вызывается вот так:

Выше приведенный вызов используется для следующего HTML кода:

Первый контейнер (source) виден пользователю. Второй контейнер (destination) является первым аргументом для Quicksand. Нужно использовать атрибут data-id, чтобы плагин мог идентифицировать одинаковые элементы в коллекции-источнике и  коллекции-назначении.

Вторым аргументом может быть возвратная функция:

Действие плагина можно модифицировать с помощью параметров:
Список доступных параметров:
Параметр Значение
по умолчанию		 Описание
adjustHeight 'auto' Выравнивание высоты контейнера для соответствия высоте пунктов. Значение 'auto' используется для автоматического выравнивания до или после анимации (определяется автоматически). Значение 'dynamic' используется для анимации процесса выравнивания высоты в ходе выполнения перестаривания порядка элементов. Значение falseиспользуется для отключения выравнивания высоты контейнера.
attribute 'data-id' Атрибут, который используется для определения принадлежности пунктов коллекциям. Вы можете определить пользовательскую функцию для получения уникального значения (смотрите примеры)
duration 750 Длительность анимации. В миллисекундах.
easing 'swing' Сглаживание анимации. Используются опции плагина jQuery easing.
enhancement function() {} Если вы планируете интегрировать визуальные эффекты (например, замещение шрифта), определите функцию, которая будет применять эффекты для пунктов в ходе анимации.
useScaling true Используется анимация масштабирования (трансформация CSS3). Требует, чтобы код включал данный плагин. Отключается автоматически, если плагин отсутствует.

Для улучшения производительности работы плагина (что может понадобиться в некоторых случаях при использовании решения объемных задач) можно использовать следующие методы:

  • Отключить useScaling, чтобы прекратить использовать трансформации CSS3 в анимации
  • Вместо использования параметра adjustHeight: 'dynamic', использовать его значенияfalse или 'auto'.

Материал переведен из зарубежного источника. И представлен исключительно в ознакомительных целях.