1. Создание кросс-платформенных
приложений – правильное
использование touch-events

2. Зачем кроссплатформенные приложения?

3. Инструменты

4. Примеры

5. gestures

6. Javascript обработка
function startup() {
var el = document.getElementById(“scrollDiv”);
el.addEventListener("touchstart", handleStart, false);
el.addEventListener("touchend", handleEnd, false);
el.addEventListener("touchcancel", handleCancel, false);
el.addEventListener("touchmove", handleMove, false);
}

7. Подводные камни

8. Мультитач
function handleStart(evt) {
…
var touches = evt.originalEvent.targetTouches;
var totalTouches = touches.length;
…
}

9. Направление движения
var direction = true;
If(Math.abs(endcoords.pageX - startcoords.pageX)
// true / false
> Math.abs(endcoords.pageY - startcoords.pageY)) {
function handleStart(evt) {
…
direction = false;
var touches = event.originalEvent.targetTouches;
var startcoords = endcoords = touches[0];
} else {
// pageX / pageY
…
direction = true;
}
function handleMove(evt) {
}
…
var touches = event.originalEvent.targetTouches;
var endcoords = touches[0];
…
}

10. Click vs. Tap
handleStart:
obj = evt.target
handleEnd:
Math.abs(endcoors.pageX – startcoords.pageX) < 10
obj.click()

11. Бесполезная прокрутка
If(scrollable.scrollHeight > scrollDiv.offsetHeight()

12. Rubber banding
handleEnd:
Вверху – 0
Внизу – MaxScroll
MaxScroll =
Высота
прокручиваемой
области - Высота
видимого окна

13. Готовые решения

14. Все!
• Сейчас ваши вопросы…
Контакты
• http://mobila.name/