
Так как задача была поставлена профессионалам из команды MooTools, но классы событий, основанные на технологии touch, от Кристофа получились компактными и модульными. Каждый класс может быть найден в пределах технологии Touch.
Swipe
Используя технологию Touch/Swipe, вы можете определять направление движение пальца, а также начальные и конечные координаты:
// Add the swipe event listener
anyElement.addEvent("swipe", function(event){
event.direction // "left" or "right"
event.start // {x: Number, y: Number} Swipe start position
event.end // {x: Number, y: Number} Swipe end position
});
// Configure minimal swipe distance and vertical swipe preferences
anyElement.store("swipe:distance", 30); // Default: 50
anyElement.store("swipe:cancelVertical", true); // Default: false
Как видно в коде сверху, вы также можете настроить минимальные дистанции скольжения или отключить вертикальное скольжение.
Pinch
Touch/Pinch позволяет вам определять события, когда пользователь «щиплет» дисплей, и в данной функции тоже есть свои настройки:
// Add a pinch event to anyElement
anyElement.addEvent("pinch", function(event){
event.pinch // "in" or "out"
});
// Store a custom threshold
anyElement.store("pinch:threshold", 0.3); // Default: 0.5; Amount of scaling to be done to fire the pinch event
Порог хранится внутри самих элементов, так что вы можете определить индивидуальные настройки для любого элемента.
Touchhold
Данное событие используется во всех мобильных операционных системах, так почему не встроить ее в браузер?
// Listen for touchhold on anyElement
anyElement.addEvent("touchhold", function(event){
// Event fires
});
Любой элемент может хранить в себе опциональное значение задержки перед запуском события Touchhold:
anyElement.store("touchhold:delay", 1000); // Default: 750
Максимум универсальности и минимум кода!
Расширения браузера
Кроме этих пользовательских touch-событий, MooTools Mobile также может предоставлять дополнительную информацию посредством параметров устройства в браузере:
Browser.Device // Object added to Browser
Browser.Device.name // ipad / iphone / ipod OR other
Browser.Device.ipad // true if on ipad
Browser.Device.iphone // true if on iphone
Browser.Device.ipod // true if on ipod
Browser.hasHighResolution // true on iPhone 4
Browser.isMobile // True on any platform that is not Windows / Linux / Mac
Эти параметры дают вам возможность больше узнать о возможностях устройства!
С интенсивным развитием мобильных устройств, важно сделать так, чтобы ваш веб-сайт был максимально адаптирован под них. Подобная разработка от Кристофа – это всего лишь небольшой помощник, который понадобится разработчикам, чтобы максимально продуктивно адаптировать веб-приложения, основанные на MooTools.