главная

Теги:


Плагин для изменения набора элементов с использованием анимации

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

Как его использовать?

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

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


Вызов плагина


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







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

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

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

  • iPhone OS
  • Android
  • Windows Mobile

Первый контейнер (source) виден пользователю. Второй контейнер (destination) является первым аргументом для Quicksand.

Нужно использовать атрибут data-id, чтобы плагин мог идентифицировать одинаковые элементы в коллекции-источнике и коллекции-назначении.

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

$('#source').quicksand( $('#destination li'), function() {
	// код возвратной функции
});

Параметры

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

$('#source').quicksand( $('#destination li'), {
	имя_параметра: значение
});

или

$('#source').quicksand( $('#destination li'), {
	имя_параметра: значение
}, function() {
	// код возвратной функции
});
Список доступных параметров:
 
Параметр
Значение
по умолчанию
Описание
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'.
Интеграция с другими плагинами
При использовании функциональных улучшений (например, подсказок для элементов), нужно использовать возвратную функцию для применения улучшений к новым клонированным объектам:
$("#content").quicksand($("#data > li"), 
  {
    duration: 1000,
  }, function() { // возвратная функция
    $('#content a').tooltip();
  }
);
При использовании элементами визуальных эффектов (например, замещение шрифта), нужно использовать функцию enhancement для возобновления /применения эффектов в ходе анимации:
$("#content").quicksand($("#data > li"), 
  {
    duration: 1000,
    enhancement: function() {
      Cufon.refresh('#content span');
    }
  }
);
Урок Создан:2011-02-10 Просмотров:1886

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


Copyright© 2009 Hosted by Zhost