сенсорные жесты iOS Web App - PullRequest
Новая
       28

сенсорные жесты iOS Web App

3 голосов
/ 01 февраля 2011

Я искал по всей сети, чтобы найти простой способ добавления сенсорных жестов к простой кнопке. По сути, я пытаюсь найти простой способ заставить кнопку «Назад» (которую вы обычно видите на панели задач в верхней части устройства iOS) изменить классы CSS из «нормального» состояния в «нажатое» состояние при нажатии.

Хотя я очень плохо знаком с Javascript, я бы предпочел использовать стандартные методы DOM, а не jQuery (или любую другую библиотеку). Может ли кто-нибудь иметь полный код и объяснить, как код JavaScript читает события ontouchstart и ontouchend и как эти функции можно использовать для изменения классов CSS?

Любая помощь будет принята с благодарностью!

TC

Ответы [ 3 ]

6 голосов
/ 01 февраля 2011

ontouchstart, ontouchmove и ontouchend управляются так же, как onclick, onmousemove и т. Д.

Вы можете применять слушателей в теге <script> или непосредственно в элементе html.

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


var back = document.getElementById("back-button-id");

back.ontouchstart = function( event ) {
 // using the target property of the event
 // you can reach the hitted html element
 event.target.className = 'css-href-selected-class-name';
}

back.ontouchend = function( event ) {
 event.target.className = 'css-href-normal-class-name';
}

Использование HTML-тега и обратных вызовов

1) Объявите обратные вызовы Javascript, чтобы поменять класс css на любое состояние 


function onclickCallback( event ) {
 // do something
}

function ontouchstartCallback( event ) {
 event.target.className = 'selected';
}

function ontouchendCallback( event ) {
 event.target.className = 'normal';
}

2) Поместите обратные вызовы в тег привязки (я предлагаю использовать DIV вместо A) 


<div class="normal" onclick="onclickCallback( event );" ontouchstart="ontouchstartCallback( event );" ontouchend="ontouchendCallback( event );">Back</div>

Редактировать 1: для предотвращения замерзания в сумерках при прокрутке

Попробуйте добавить обработчик ontouchmove 

ontouchmove="ontouchmoveCallback( event );"

Затем объявите функцию-обработчик, которая поменяет класс css 

function ontouchmoveCallback( event ) {
    event.target.className = 'normal';
}

Надеюсь, это поможет! Ciao.

2 голосов
/ 01 февраля 2011

Это должно помочь вам начать:

HTML: 

 <input type="button" id="thebutton" value="Do Stuff!" />

Javascript: 

 var thebutton = document.getElementById("thebutton");

 thebutton.ontouchstart = function(e)
 {
     this.setAttribute('class', 'pressed');

     var touches = e.touches; // array of all touch data

     var target = touches[0].target; // what DOM element was touched
     var pageX = touches[0].pageX; // coords relative to site
     var pageY = touches[0].pageY;
     var clientX = touches[0].clientX; // coords relative to screen
     var clientY = touches[0].clientY;
 };

 thebutton.ontouchmove = function(e)
 {
     var touches = e.touches; // same fields as above
     var changedTouches = e.changedTouches; // only touches which have changed
 };

 thebutton.ontouchend = function(e)
 {
     this.setAttribute('class', '');

     // cleanup, if needed
 };

Подробнее см .: http://sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

Стоит отметить, что MobileSafari иногда делает странные вещи с сенсорными событиями и элементами формы (в частности, с полями ввода). Возможно, вы обнаружите, что лучше использовать стиль div, чем фактическую кнопку ввода.

РЕДАКТИРОВАТЬ: Для того, что вы пытаетесь сделать, я думаю, что вы могли бы лучше обслуживать с простыми событиями щелчка, которые обычно работают хорошо для таких вещей, как нажатия кнопок. События касания больше для перетаскивания, точного отслеживания пальцев и т. Д. Попробуйте это: 

thebutton.onclick = function(e) { this.setAttribute('class', 'your_class'); };

EDIT2: Теперь я понимаю, что вы просите. Самый простой способ это: 

thebutton.ontouchstart = function(e) { this.setAttribute('class', 'pressed'); };
thebutton.ontouchend   = function(e) { this.setAttribute('class', ''); };
1 голос
/ 01 февраля 2011

Уже есть несколько библиотек для jQuery

http://plugins.jquery.com/project/multiswipe

И вы также можете проверить это демо из

http://taitems.github.com/Mobile-Web-based-Gesture-Recognition/

И вы можете разветвить пример и начать работать с ним.

Есть несколько вариантов, но все по-новому.

...