Главная страница » jQuery » Фильтрация элементов с помощью jQuery

Фильтрация элементов с помощью jQuery

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Загрузить данные с помощью вызова AJAX
Трансформировать код HTML с помощью Javascript
Использовать HTML код, например, сделать неупорядоченные списки

Фильтрация элементов с использованием jQuery

Плагин использует jQuery Easing и плагин для вращения и масштабирования элементов HTML. Набор подключений для Quiksand выглядит следующим образом:

Сам плагин вызывается вот так:

1	$('#source').quicksand( $('#destination > li') );

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

<li data-id="iphone">iPhone OS</li>

<li data-id="android">Android</li>

<li data-id="winmo">Windows Mobile</li>

</ul><ul id="destination">

<li data-id="iphone">iPhone OS</li>

</ul>

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

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

$('#source').quicksand( $('#destination li'), function() {

// код возвратной функции

});

Действие плагина можно модифицировать с помощью параметров:

$('#source').quicksand( $('#destination li'), {

имя_параметра: значение

});

Список доступных параметров:

Параметр	Значение по умолчанию	Описание
`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'.

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