jQuery.kinetic

Опубликовано: 1 января 1970 г.
  • скроллинг
  • jquery
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.

Популярные статьи
2D игра на Unity. Подробное руководство. Часть 1
  • unity
2D игра на Unity. Подробное руководство. Часть 1
Адаптивный слайдер без Javascript на CSS3
  • слайдер
Адаптивный слайдер без Javascript на CSS3
Работа с Unity в 2D
  • unity
Работа с Unity в 2D
2D игра на Unity. Подробное руководство. Часть 3
  • unity
2D игра на Unity. Подробное руководство. Часть 3
2D игра на Unity. Подробное руководство. Часть 4
  • unity
2D игра на Unity. Подробное руководство. Часть 4
2D игра на Unity. Подробное руководство. Часть 5
  • unity
2D игра на Unity. Подробное руководство. Часть 5
2D игра на Unity. Подробное руководство. Часть 6
  • unity
2D игра на Unity. Подробное руководство. Часть 6
Учебник по новому GUI в Unity. Часть 2.
  • unity
Учебник по новому GUI в Unity. Часть 2.
Учебник по новому GUI в Unity. Часть 1.
  • unity
Учебник по новому GUI в Unity. Часть 1.

HTML LESS LESS React
Онлайн журнал для профессиональных веб-дизайнеров и программистов
БлогПлагиныГрафикаИнструменты
SPAbootstrapjavascriptjqueryанимацияверсткагалереяграфикакарусельподсказкискроллингсчетчикформыэлементы интерфейса
© 2009-2017 WebSketches.ru