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
-
Добавляет CSS обертку чтобы использовать аппаратное ускорение в iOS. Значение по-умолчанию - false
- filterTarget
-
Функция выводит значение «ложь», чтобы предотвратить задержку при прокрутке.
- 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
-
Функция, которая вызывается при перемещении
- stopped
-
Функция, которая вызывается когда движение прекратилось.
Методы
- 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>Запуск тестов3>
Набор тестов использует сервер Grunt и функционал qUnit. Тесты составляются, но сейчас перекрывают функциональность ядра. Тест использует все данные qUnit HTML в папке /test/specs
.
Затем запустите из корня источника
$ grunt
Примеры с jQuery.kinetic
Примеры работы с jQuery.kinetic сделаны в виде HTML-файлов и помещены в папку /test.