На сайте ведутся работы!
Поэтому могут быть ошибки и недочеты. Приносим свои извинения и постараемся все исправить в ближайшее время.
AdBlock
Блокируйте рекламу. Просматривайте быстрее.
Adguard
Самый быстрый и легковесный блокировщик рекламы для браузеров.
Недавние обсуждения
В этой статье мы рассмотрим библиотеку, которая поможет нам отслеживать силу нажатия на экран или тачпад устройства пользователя.

Как многие, наверное, знают, относительно недавно вышел ноутбук от Apple, имеющий тачпад, поддерживающий ForceTouch – технологию, которая позволяет отслеживать силу нажатия.

Также вышел новый iPhone, где использована технология 3D Touch, которая делает то же самое, но уже на сенсорном дисплее устройства. Технология достаточно интересная, и в этой статье мы рассмотрим Pressurejavascript библиотеку, которая позволит использовать возможности этой технологии на сайтах.

Установка и настройка

Скачайте нужные файлы у нас или на GitHub, либо используйте npm или bower:

Код
npm install pressure --save // npm
bower install pressure --save // bower


Используйте pressure в глобальной области видимости:

Код
Pressure.set('#id-name', {
  change: function(force){
  this.innerHTML = force;
  }
});


Или с browserify или CommonJS как установку.

Код
var Pressure = require('pressure');

Pressure.set('#id-name', {
  change: function(force){
  this.innerHTML = force;
  }
});


Использование

Заметьте, что ключевое слово this в каждом методе обратного вызова будет самостоятельным элементом, к которому применена сила.

Код
Pressure.set('#element', {
  start: function(){
  // this вызван в начале
  },
  end: function(){
  // this вызван в конце
  },
  startDeepPress: function(){
  // this вызван на "сильное нажатие" / "глубокое нажатие", когда сила больше 0.5
  },
  endDeepPress: function(){
  // this вызван в конце "сильного нажатия" / "глубокого нажатия"
  },
  change: function(force, event){
  // this вызывается каждый раз, когда происходит изменение силы нажатия
  // значение силы будет всегда в диапазоне от 0 до 1 на мобильных и настольных устройствах
  },
  unsupported: function(){
  // this вызывается однажды, когда произведено нажатие на экран, но устройство или браузер не поддерживает технологию ForceTouch / 3D Touch
  }
});


Итак, на этом все. Спасибо за внимание!

Автор: Михаил Русаков
Теги к материалу
устройство, нажатия, силу, Определяем, на
Поделись материалом с друзьями
Рекомендуем к просмотру
К материалу оставили 0 комментариев