TouchSwipe jQuery Plugin

Многие современные разработки не обходятся без ориентации под мобильные/планшеты. Почему бы Вам уже сейчас не начать использовать события swipe для того, чтобы дать мобильным и планшетным пользователям Вашего сайта больше возможностей и создать более комфортные условия для нахождения на сайте?

Простой jQuery плагин под названием TouchSwipe позволит получать события swipe (передвижение пальцами по экрану). Swipe действие делают пользователи, например, во время просмотра фотографий. Это самый удачный пример для понимания, который можно привести. Но оказывается, что это действие очень удобно не только для просмотра фотографий, но и уже сегодня используется на многих сайтах, например, для того же просмотра фото или вызова меню. Кроме того, это позволит использовать свайп-действия мыши (захват и перетаскивание) для пользователей ПК, MAC.

Для того, чтобы начать использовать данную библиотеку, необходимо подключить jQuery и саму библиотеку. Если на странице уже есть подключенный jQuery, то делать повторно это не нужно:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>

Подключаем TouchSwipe

<script type="text/javascript" src="/sys/jquery.touchSwipe.min.js"></script>

После чего на странице можно использовать следующий jQuery код:

$(function()
{
//swipe
if ($("div").is(".itidactv")){
$( ".sclck" ).on( "swipe", function(){
setTimeout(function(){
history.pushState(null, null, $('.slick-center > .itidactv').html())
$('.page-header').html('<h2 itemprop="name">'+$('.slick-center > .txth2').html()+'</h2>');
var vote = $('.slick-center > .voteact').html();
if(vote > 0){$('.count').html(vote);}else{$('.count').html('');}
},200)
});
}
//OFF swipe
//off ready
});

Т.е. весь код сводится к следующему:

$(function()
{
$( ".sclck" ).on( "swipe", function(){
//события, выполняемые при swipe
});
});

В демонстрационных материалах можно найти много интересного. А именно:

• можно узнавать сколькими пальцами происходит событие,
• в какую сторону прошел swipe,
• получать обработчики событий конца swipe

Стандартные функции:

$(function() { 
 //Enable swiping...
 $("#test").swipe( {
 //Генерируем обработчик swipe для всех направлений
 swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
 $(this).text("Вы перелистнули " + direction + " сторону" ); 
 },
 //threshold – расстояние сдвига контейнера, при котором срабатывает событие. По умолчанию — 75px, установите значение в 0 для теста!
 threshold:0
 });
});

Возможные варианты событий:

swipeLeft, swipeRight, swipeUp, swipeDown

Использовать так:

 $(".slide").swipe({
swipeRight:function(event, direction) {
 $(this).append("Вы перелистнули " + direction + " сторону" );
 }
});

Узнать сколько раз произошло событие можно с помощью данного кода:

$(function() {
 var count=0;
 //Подключаем swiping...
 $("#test").swipe( {
 //Single swipe handler for left swipes
 swipeLeft:function(event, direction, distance, duration, fingerCount) {
 $(this).text("Вы перелистнули " + direction + " " + ++count + " раз " ); 
 },
 threshold:0
 });
});

Узнать количество пальцев:

$(function() { 
 $("#test").swipe( {
 swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
 $("#test").text("You swiped " + direction + " with " + fingerCount + " fingers");
 },
 threshold:0,
 fingers:'all'
 });
});

Пример использования двух и трех пальцев для осуществления события

$(function() {
 $("#test, #test_2").swipe( {
 swipeStatus:function(event, phase, direction, distance, duration, fingers, fingerData) {
 if(phase==$.fn.swipe.phases.PHASE_START) {
 $(this).text("moving...");
 } 
 if(phase==$.fn.swipe.phases.PHASE_CANCEL) {
 $(this).text("swipe cancelled (due to finger count) " );
 } 
 },
 swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
 $(this).text("You swiped " + direction + " with " + fingerCount + " fingers");
 },
 threshold:0,
 fingers:2
 });
 $("#test_2").swipe({ fingers:3 } );
});

Обрабатываем события swipe и получаем данные о времени, количестве задействованных пальцев, расстоянию от нажатия, направлении и другие данные:

$(function() {
 //Enable swiping...
 $("#test").swipe( {
 swipeStatus:function(event, phase, direction, distance, duration, fingers, fingerData, currentDirection)
 {
 var str = "<h4>Swipe Phase : " + phase + "<br/>";
 str += "Current direction: " + currentDirection + "<br/>";
 str += "Direction from inital touch: " + direction + "<br/>";
 str += "Distance from inital touch: " + distance + "<br/>";
 str += "Duration of swipe: " + duration + "<br/>";
 str += "Fingers used: " + fingers + "<br/></h4>";
 //Here we can check the:
 //phase : 'start', 'move', 'end', 'cancel'
 //direction : 'left', 'right', 'up', 'down'
 //distance : Distance finger is from initial touch point in px
 //duration : Length of swipe in MS
 //fingerCount : the number of fingers used
 if (phase!="cancel" && phase!="end") {
 if (duration<5000)
 str +="Under maxTimeThreshold.<h3>Swipe handler will be triggered if you release at this point.</h3>"
 else
 str +="Over maxTimeThreshold. <h3>Swipe handler will be canceled if you release at this point.</h3>"
 if (distance<200)
 str +="Not yet reached threshold. <h3>Swipe will be canceled if you release at this point.</h3>"
 else
 str +="Threshold reached <h3>Swipe handler will be triggered if you release at this point.</h3>"
 }
 if (phase=="cancel")
 str +="<br/>Handler not triggered. <br/> One or both of the thresholds was not met "
 if (phase=="end")
 str +="<br/>Handler was triggered."
 $("#test").html(str);
 },
 threshold:200,
 maxTimeThreshold:5000,
 fingers:'all'
 });
 });

Кроме того, в примерах и документации Вы сможете найти дополнительные возможности, например, использование zoom - увеличения и уменьшения пальцами и другие.

Файлы TouchSwipe jQuery Plugin: