<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Жесты | Wiki | PWODEV</title>
	<atom:link href="https://wiki.pwodev.com/tag/%D0%B6%D0%B5%D1%81%D1%82%D1%8B/feed/" rel="self" type="application/rss+xml" />
	<link>https://wiki.pwodev.com/tag/жесты/</link>
	<description>Help for developers</description>
	<lastBuildDate>Fri, 09 Aug 2019 12:15:16 +0000</lastBuildDate>
	<language>ru-RU</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.1</generator>
	<item>
		<title>jQuery touch swipe или как отследить жесты</title>
		<link>https://wiki.pwodev.com/jquery-touch-swipe/</link>
					<comments>https://wiki.pwodev.com/jquery-touch-swipe/#respond</comments>
		
		<dc:creator><![CDATA[Paul Osmachko]]></dc:creator>
		<pubDate>Tue, 24 Oct 2017 06:58:09 +0000</pubDate>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[JS]]></category>
		<category><![CDATA[Android]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[Жесты]]></category>
		<guid isPermaLink="false">http://wiki.pwodev.com/?p=136</guid>

					<description><![CDATA[<p>Что такое жесты и какие они бывают: Swipe &#8212; пролистывание как слайд, обычно используется для открытия меню жестом, провести пальцем по экрану слева на право чтобы открылось меню. hold &#8212; событие долгому длинному нажатию Для того чтобы отследить жесты как на мобильном устройстве iPhone или Android или любой другой mobile, проще всего подключить библиотеку&#160;jquery.touchSwipe.min.js. Дальше [&#8230;]</p>
<p>Сообщение <a href="https://wiki.pwodev.com/jquery-touch-swipe/">jQuery touch swipe или как отследить жесты</a> появились сначала на <a href="https://wiki.pwodev.com">Wiki | PWODEV</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>Что такое жесты и какие они бывают:</p>



<ul class="wp-block-list"><li>Swipe &#8212; пролистывание как слайд, обычно используется для открытия меню жестом, провести пальцем по экрану слева на право чтобы открылось меню.</li><li>hold &#8212; событие долгому длинному нажатию</li></ul>



<p>Для того чтобы отследить жесты как на мобильном устройстве iPhone или Android или любой другой mobile, проще всего подключить библиотеку&nbsp;<a href="http://wiki.pwodev.com/wp-content/uploads/2017/10/jquery.touchSwipe.min_.js.zip">jquery.touchSwipe.min.js</a>. Дальше привязываем событие к нужному нам элементу:</p>



<pre class="wp-block-code"><code>jQuery('body').swipe({
 swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
 console.log(direction);
 }
});</code></pre>



<p>Теперь мы можем дополнять наш сайт жестами.</p>



<p>Если нам нужно чтобы событие жест сработал в реальном времени или через определенное количество пикселей пишем такую функцию:</p>



<pre class="wp-block-code"><code>jQuery('body').swipe( {
    swipeStatus:function(event, phase, direction, distance, duration, fingerCount, fingerData, currentDirection)
    {
        if (phase=="start"){
            // сработает в начале swipe
        } 
        if (phase=="end"){ 
            //сработает через 20 пикселей то число которое выбрали в threshold
            if (direction == 'left') {
                //сработает при движении влево
            }
            if (direction == 'right') {
                //сработает при движении вправо
            }
            if (direction == 'up') {
                //сработает при движении вверх
            }
            if (direction == 'down') {
                //сработает при движении вниз
            }
 },
 triggerOnTouchEnd:false,
 threshold:20 // сработает через 20 пикселей
});</code></pre>



<h5 class="wp-block-heading">Параметры:</h5>



<p><strong>event</strong> &#8212; стандартный ивент, тут можно посмотреть по какому элементу сработал скрипт</p>



<pre class="wp-block-code"><code>jQuery(event.target)</code></pre>



<p><strong>phase</strong></p>



<ul class="wp-block-list"><li><em>start</em> &#8212; указывает начальную фазу события касания</li><li><em>move</em> &#8212; указывает на событие перемещения</li><li><em>end</em> &#8212; указывает на завершение события</li><li><em>cancel</em> &#8212; указывает на отмену события</li></ul>



<p><strong>direction</strong></p>



<ul class="wp-block-list"><li><em>left</em> &#8212; указывает на передвижение влево</li><li><em>right</em> &#8212; указывает на передвижение вправо</li><li><em>up</em> &#8212; указывает на передвижение вверх</li><li><em>down</em> &#8212; указывает на передвижение вниз</li><li><em>in</em> &#8212; указывает на событие помещения в обьект</li><li><em>out</em> &#8212; указывает на событие выхода из обьекта</li></ul>



<p><strong>distance</strong> &#8212; расстояние которое пользователь пролистал</p>



<p><strong>duration</strong> &#8212; продолжительность пролистывания в миллисекундах</p>



<p><strong>fingerCount</strong> &#8212; количество пальцев при таче</p>



<p><strong>fingerData</strong> &#8212; координаты пальцев при событии тач</p>



<p><strong>currentDirection</strong> &#8212; текущее направление движения тача</p>



<p><a href="http://labs.rampinteractive.co.uk/touchSwipe" target="_blank" rel="noopener noreferrer">Сайт библиотеки плагина и документации к плагину</a></p>
<p><a class="a2a_button_facebook" href="https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fwiki.pwodev.com%2Fjquery-touch-swipe%2F&amp;linkname=jQuery%20touch%20swipe%20%D0%B8%D0%BB%D0%B8%20%D0%BA%D0%B0%D0%BA%20%D0%BE%D1%82%D1%81%D0%BB%D0%B5%D0%B4%D0%B8%D1%82%D1%8C%20%D0%B6%D0%B5%D1%81%D1%82%D1%8B" title="Facebook" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_vk" href="https://www.addtoany.com/add_to/vk?linkurl=https%3A%2F%2Fwiki.pwodev.com%2Fjquery-touch-swipe%2F&amp;linkname=jQuery%20touch%20swipe%20%D0%B8%D0%BB%D0%B8%20%D0%BA%D0%B0%D0%BA%20%D0%BE%D1%82%D1%81%D0%BB%D0%B5%D0%B4%D0%B8%D1%82%D1%8C%20%D0%B6%D0%B5%D1%81%D1%82%D1%8B" title="VK" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_twitter" href="https://www.addtoany.com/add_to/twitter?linkurl=https%3A%2F%2Fwiki.pwodev.com%2Fjquery-touch-swipe%2F&amp;linkname=jQuery%20touch%20swipe%20%D0%B8%D0%BB%D0%B8%20%D0%BA%D0%B0%D0%BA%20%D0%BE%D1%82%D1%81%D0%BB%D0%B5%D0%B4%D0%B8%D1%82%D1%8C%20%D0%B6%D0%B5%D1%81%D1%82%D1%8B" title="Twitter" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_linkedin" href="https://www.addtoany.com/add_to/linkedin?linkurl=https%3A%2F%2Fwiki.pwodev.com%2Fjquery-touch-swipe%2F&amp;linkname=jQuery%20touch%20swipe%20%D0%B8%D0%BB%D0%B8%20%D0%BA%D0%B0%D0%BA%20%D0%BE%D1%82%D1%81%D0%BB%D0%B5%D0%B4%D0%B8%D1%82%D1%8C%20%D0%B6%D0%B5%D1%81%D1%82%D1%8B" title="LinkedIn" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_skype" href="https://www.addtoany.com/add_to/skype?linkurl=https%3A%2F%2Fwiki.pwodev.com%2Fjquery-touch-swipe%2F&amp;linkname=jQuery%20touch%20swipe%20%D0%B8%D0%BB%D0%B8%20%D0%BA%D0%B0%D0%BA%20%D0%BE%D1%82%D1%81%D0%BB%D0%B5%D0%B4%D0%B8%D1%82%D1%8C%20%D0%B6%D0%B5%D1%81%D1%82%D1%8B" title="Skype" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_whatsapp" href="https://www.addtoany.com/add_to/whatsapp?linkurl=https%3A%2F%2Fwiki.pwodev.com%2Fjquery-touch-swipe%2F&amp;linkname=jQuery%20touch%20swipe%20%D0%B8%D0%BB%D0%B8%20%D0%BA%D0%B0%D0%BA%20%D0%BE%D1%82%D1%81%D0%BB%D0%B5%D0%B4%D0%B8%D1%82%D1%8C%20%D0%B6%D0%B5%D1%81%D1%82%D1%8B" title="WhatsApp" rel="nofollow noopener" target="_blank"></a><a class="a2a_dd addtoany_share_save addtoany_share" href="https://www.addtoany.com/share#url=https%3A%2F%2Fwiki.pwodev.com%2Fjquery-touch-swipe%2F&#038;title=jQuery%20touch%20swipe%20%D0%B8%D0%BB%D0%B8%20%D0%BA%D0%B0%D0%BA%20%D0%BE%D1%82%D1%81%D0%BB%D0%B5%D0%B4%D0%B8%D1%82%D1%8C%20%D0%B6%D0%B5%D1%81%D1%82%D1%8B" data-a2a-url="https://wiki.pwodev.com/jquery-touch-swipe/" data-a2a-title="jQuery touch swipe или как отследить жесты"></a></p><p>Сообщение <a href="https://wiki.pwodev.com/jquery-touch-swipe/">jQuery touch swipe или как отследить жесты</a> появились сначала на <a href="https://wiki.pwodev.com">Wiki | PWODEV</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://wiki.pwodev.com/jquery-touch-swipe/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
