Фильтрация элементов с помощью jQuery
Накопилось много информации на сайте, и необходимо сделать фильтрацию элементов сгруппировав их в категории, тогда этот урок станет Вам интересен. Мы рассмотрим фильтрацию элементов с помощью плагина Quiksand, который используется для изменения порядка и сортировки списков с применением анимированной визуализации процесса перестановки. Подобный эффект используется в приложениях на Mac и производит очень приятное впечатление.
Плагин фактически производит замену одной коллекции элементов другой. Вам нужно предоставить для него данные наборы. Сделать это можно следующими способами:
- Загрузить данные с помощью вызова AJAX
- Трансформировать код HTML с помощью Javascript
- Использовать HTML код, например, сделать неупорядоченные списки

1 2 3 4 5 |
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="js/jquery-css-transform.js" type="text/javascript"></script> <script src="js/jquery-animate-css-rotate-scale.js" type="text/javascript"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/jquery.quicksand.min.js" type="text/javascript"></script> |
1 |
$('#source').quicksand( $('#destination > li') ); |
1 2 3 4 5 6 7 8 9 |
<ul id="source"> <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="macosx">Mac OS X</li> <li data-id="macos9">Mac OS 9</li> <li data-id="iphone">iPhone OS</li> </ul> |
Первый контейнер (source
) виден пользователю. Второй контейнер (destination
) является первым аргументом для Quicksand. Нужно использовать атрибут data-id
, чтобы плагин мог идентифицировать одинаковые элементы в коллекции-источнике и коллекции-назначении.
Вторым аргументом может быть возвратная функция:
1 2 3 |
$('#source').quicksand( $('#destination li'), function() { // код возвратной функции }); |
1 2 3 |
$('#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'
.
Материал переведен из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 12.09.2011 в 05:59, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |