jQuery.kinetic

jQuery.kinetic - простой плагин, который добавляет плавное скольжение, при прокрутке контейнера.

Этот плагин работает с jQuery и Zepto.

Браузеры

ie: 7+, firefox: 3.6+, chrome: 13+, safari: 5+, iOS Safari: 4+

Настройки

cursor: тип - строка

Курсор, показываемый при наведении на прокручиваемый контент. Значение по-умолчанию - move
slowdown: тип - число

Эта опция влияет на скорость, с которой прокрутка замедляется. Значение по-умолчанию - 0.9
x: тип - строка

Переключение движения вдоль оси х. Значение по-умолчанию - true
y: тип - строка

Переключение движения вдоль оси y. Значение по-умолчанию - true
maxvelocity: тип - число

Эта опция ставит ограничение на скорость, с которой можно прокручивать содержимое контейнера. Значение по-умолчанию - 40
throttleFPS: тип - число

Добавляет к движениям мыши «тормозилку». Значение по-умолчанию - 60
triggerHardware: тип - false/true

Добавляет CSS обертку чтобы использовать аппаратное ускорение в iOS. Значение по-умолчанию - false
filterTarget: тип - function(target)

Функция выводит значение «ложь», чтобы предотвратить задержку при прокрутке.
movingClass: тип - объект

Значение по-умолчанию - {up: 'kinetic-moving-up', down: 'kinetic-moving-down', left: 'kinetic-moving-left', right: 'kinetic-moving-right'}
deceleratingClass: тип - объект

Значение по-умолчанию - {up: 'kinetic-decelerating-up', down: 'kinetic-decelerating-down', left: 'kinetic-decelerating-left', right: 'kinetic-decelerating-right'}
moved: тип - function(settings)

Функция, которая вызывается при перемещении
stopped: тип - function(settings)

Функция, которая вызывается когда движение прекратилось.

Методы

start

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

$('#wrapper').kinetic('start', {velocity: -30}); // влево
$('#wrapper').kinetic('start', {velocity: 30}); // вправо
$('#wrapper').kinetic('start', {velocity: -30, velocityY: -10}); // по диагонали

end

начинает уменьшать скорость прокрутки в контейнере

$('#wrapper').kinetic('end');

stop

Останавливает скроллинг немедленно.

detach

Отделяет слушатели и функционал от блока wrapper.

attach

Снова соединяет слушатели и функционал, разделенный методом detach.

Вы можете вызвать методы, запустив плагин для активированного элемента:

$('#wrapper').kinetic(); // активация
$('#wrapper').kinetic('methodname', options);

Добавление собственных методов

В папке экстра-методы даны примеры пользовательских методов. По-аналогии вы можете добавить свои собственные:

$.Kinetic.prototype.do = function(options){

  // this -> экземпляр Kinetic
  // this.settings -> получить текущие настройки
  // options -> опции передаются при вызове

  };

  // вызов метода

$('#elem').kinetic('do', { options });

Взлом ядра

Теперь вы можете получить доступ к функционалу ядра, чтобы сделать изменения:

var _start = $.Kinetic.prototype.start;
  $.Kinetic.prototype.start = function(options){
  // -> что-нибудь делаем
  _start.apply(this, arguments);
};

<3>Запуск тестов

Набор тестов использует сервер Grunt и функционал qUnit. Тесты составляются, но сейчас перекрывают функциональность ядра. Тест использует все данные qUnit HTML в папке /test/specs.

```
grunt npm install -g grunt
```
Установите devDependencies npm install из корня источника

Затем запустите из корня источника

$ grunt

Примеры с jQuery.kinetic

Примеры работы с jQuery.kinetic сделаны в виде HTML-файлов и помещены в папку /test.