metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Touch and swipe routines. The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Touch and swipe - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Touch and swipe</a></li> <li class="toc-entry"><a href="#_swipe_about">About</a></li> <li class="toc-entry"><a href="#_swipe_features">Main features</a></li> <li class="toc-entry"><a href="#_swipe_options">Options</a></li> <li class="toc-entry"><a href="#_swipe_events">Events</a></li> <li class="toc-entry"> <a href="#_swipe_swipes">Swipe events</a> <ul> <li class="toc-entry"><a href="#_swipe_event_swipe">Swipe</a></li> <li class="toc-entry"><a href="#_swipe_event_swipe_left">Swipe left</a></li> <li class="toc-entry"><a href="#_swipe_event_swipe_right">Swipe right</a></li> <li class="toc-entry"><a href="#_swipe_event_swipe_up">Swipe up</a></li> <li class="toc-entry"><a href="#_swipe_event_swipe_down">Swipe down</a></li> <li class="toc-entry"><a href="#_swipe_event_swipe_status">Swipe status</a></li> </ul> </li> <li class="toc-entry"> <a href="#_swipe_pinches">Pinch events</a> <ul> <li class="toc-entry"><a href="#_swipe_event_pinch_in">Pinch in</a></li> <li class="toc-entry"><a href="#_swipe_event_pinch_out">Pinch out</a></li> <li class="toc-entry"><a href="#_swipe_event_pinch_status">Pinch status</a></li> </ul> </li> <li class="toc-entry"> <a href="#_swipe_taps">Taps events</a> <ul> <li class="toc-entry"><a href="#_swipe_event_tap">Tap</a></li> <li class="toc-entry"><a href="#_swipe_event_tap_double">Double tap</a></li> <li class="toc-entry"><a href="#_swipe_event_tap_long">Long tap</a></li> <li class="toc-entry"><a href="#_swipe_event_hold">Hold</a></li> </ul> </li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Touch and swipe</h1> <p class="text-leader"> This component designed and to be used on touch devices such us iPad, iPhone, Android Phone, etc. </p>  <h3 id="_swipe_about">About</h3> <p class="text-small">Based on <strong class="fg-green">Matt Bryson</strong> <a href="https://github.com/mattbryson/TouchSwipe-Jquery-Plugin">TouchSwipe plugin</a></p> <p> The <code>touch</code> component designed and to be used on touch devices such us iPad, iPhone, Android Phone, etc. Component can detects single and multiple finger swipes, pinches and falls back to mouse 'drags' on the desktop. You can set time and distance thresholds to distinguish between swipe gesture and slow drag. The component allows exclusion of child elements (interactive elements) as well allowing page scrolling or page zooming depending on configuration. </p> <div class="example d-flex flex-justify-center no-border"> <div class="emulator galaxy-s5" data-role="touch" data-on-swipe="mySwipe" style="height: 400px;"> <div class="head-bar pos-absolute bg-red fg-white z-1"> <button class="expand-button light ml-2" id="sidebar-toggle"><span></span></button> <span class="app-title">Metro 4</span> </div> <aside class="sidebar pos-absolute z-2" data-role="sidebar" data-toggle="#sidebar-toggle" id="sb1"> <div class="sidebar-header" data-image="images/sb-bg-1.jpg"> <a href="/" class="fg-white sub-action" onclick="Metro.sidebar.close('#sb1'); return false;"><span class="mif-arrow-left mif-2x"></span></a> <div class="avatar"> <img data-role="gravatar" data-email="sergey@pimenov.com.ua"> </div> <span class="title fg-white">Metro 4 Components Library</span> <span class="subtitle fg-white"> 2018 © Sergey Pimenov</span> </div> <ul class="sidebar-menu"> <li><a><span class="mif-home icon"></span>Home</a></li> <li><a><span class="mif-books icon"></span>Guide</a></li> <li><a><span class="mif-files-empty icon"></span>Examples</a></li> <li class="divider"></li> <li><a><span class="mif-images icon"></span>Icons</a></li> </ul> </aside> <div class="app-holder h-100 d-flex flex-justify-center flex-align-center"> <p class="text-center text-leader">Swipe left or right<br>to show/hide sidebar</p> </div> </div> <script> function mySwipe(event, direction, distance, duration, fingerCount, fingerData, currentDirection){ var sb = $("#sb1").data("sidebar"); if (direction === "right") { if (!sb.isOpen()) { sb.open(); } } if (direction === "left") { if (sb.isOpen()) { sb.close(); } } } </script> </div> <p> To activate component, you must add attribute <code>data-role="touch"</code> to your touch and swipe area, or use function init method: </p> <pre><code> <body data-role="touch"> ... </body> </code></pre> <p>or</p> <pre><code> $("body").touch({...}); </code></pre> <h3 id="_swipe_features">Main features</h3> <p> The main features of the <code>touch</code> component: </p> <ul> <li>Detects swipes in 4 directions, "up", "down", "left" and "right"</li> <li>Detects pinches "in" and "out"</li> <li>Supports single finger or double finger touch events</li> <li>Supports click events both on the touchSwipe object and its child objects</li> <li>Definable threshold / maxTimeThreshold to determining when a gesture is actually a swipe</li> <li>Events triggered for swipe "start","move","end" and "cancel"</li> <li>End event can be triggered either on touch release, or as soon as threshold is met</li> <li>Allows swiping and page scrolling</li> <li>Disables user input elements (Button, form, text etc) from triggering swipes</li> </ul> <h3 id="_swipe_options">Options</h3> <p> You can set any options to change reaction component to your touches. </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Option</th> <th>Data-*</th> <th>Default</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>fingers</code></td> <td><code>data-fingers</code></td> <td>1</td> <td>Constants representing the number of fingers used in a swipe. Use integer value or 'ALL'. Any swipes that do not meet this requirement will NOT trigger swipe handlers.</td> </tr> <tr> <td><code>threshold</code></td> <td><code>data-threshold</code></td> <td>75</td> <td>The number of pixels that the user must move their finger by before it is considered a swipe.</td> </tr> <tr> <td><code>cancelThreshold</code></td> <td><code>data-cancel-threshold</code></td> <td>null</td> <td>The number of pixels that the user must move their finger back from the original swipe direction to cancel the gesture.</td> </tr> <tr> <td><code>pinchThreshold</code></td> <td><code>data-pinch-threshold</code></td> <td>20</td> <td>The number of pixels that the user must pinch their finger by before it is considered a pinch.</td> </tr> <tr> <td><code>pinchThreshold</code></td> <td><code>data-pinch-threshold</code></td> <td>20</td> <td>The number of pixels that the user must pinch their finger by before it is considered a pinch.</td> </tr> <tr> <td><code>maxTimeThreshold</code></td> <td><code>data-max-time-threshold</code></td> <td>null</td> <td>Time, in milliseconds, between touchStart and touchEnd must NOT exceed in order to be considered a swipe.</td> </tr> <tr> <td><code>fingerReleaseThreshold</code></td> <td><code>data-finger-release-threshold</code></td> <td>250</td> <td>Time in milliseconds between releasing multiple fingers. If 2 fingers are down, and are released one after the other, if they are within this threshold, it counts as a simultaneous release.</td> </tr> <tr> <td><code>longTapThreshold</code></td> <td><code>data-long-tap-threshold</code></td> <td>500</td> <td>Time in milliseconds between tap and release for a long tap.</td> </tr> <tr> <td><code>doubleTapThreshold</code></td> <td><code>data-double-tap-threshold</code></td> <td>200</td> <td>Time in milliseconds between 2 taps to count as a double tap.</td> </tr> <tr> <td><code>triggerOnTouchEnd</code></td> <td><code>data-trigger-on-touch-end</code></td> <td>true</td> <td>If true, the swipe events are triggered when the touch end event is received (user releases finger). If false, it will be triggered on reaching the threshold, and then cancel the touch event automatically.</td> </tr> <tr> <td><code>triggerOnTouchLeave</code></td> <td><code>data-trigger-on-touch-leave</code></td> <td>false</td> <td>If true, then when the user leaves the swipe object, the swipe will end and trigger appropriate handlers.</td> </tr> <tr> <td><code>allowPageScroll</code></td> <td><code>data-allow-page-scroll</code></td> <td>auto</td> <td> How the browser handles page scrolls when the user is swiping on a swipe object. <br><code>auto</code> : all undefined swipes will cause the page to scroll in that direction. <br><code>none</code> : the page will not scroll when user swipes. <br><code>horizontal</code> : will force page to scroll on horizontal swipes. <br><code>vertical</code> : will force page to scroll on vertical swipes. </td> </tr> <tr> <td><code>fallbackToMouseEvents</code></td> <td><code>data-fallback-to-mouse-events</code></td> <td>true</td> <td>If true mouse events are used when run on a non touch device, false will stop swipes being triggered by mouse events on non touch devices.</td> </tr> <tr> <td><code>excludedElements</code></td> <td><code>data-excluded-elements</code></td> <td>.no-swipe</td> <td>A jquery selector that specifies child elements that do NOT trigger swipes. By default this excludes elements with the class <code>.no-swipe</code>.</td> </tr> <tr> <td><code>preventDefaultEvents</code></td> <td><code>data-prevent-default-events</code></td> <td>true</td> <td>By default default events are cancelled, so the page doesn't move. You can disable this so both native events fire as well as your handlers.</td> </tr> </tbody> </table> <h3 id="_swipe_events">Events</h3> <p> You can handle various events to respond to user actions: <code>swipe</code>, <code>swipe left</code>, <code>swipe right</code>, <code>swipe up</code>, <code>swipe down</code>, <code>swipe status</code>, <code>pinch in</code>, <code>pinch out</code>, <code>pinch status</code>, <code>tap</code>, <code>double tap</code>, <code>long tap</code> and <code>hold</code>. </p>  <h3 id="_swipe_swipes">Swipe events</h3> <p>Swipe events receive next arguments:</p> <table class="table cell-border table-border options-table mt-4"> <thead> <tr> <th>Argument</th> <th>Type</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>event</code></td> <td><code>eventObject</code></td> <td>The original event object</td> </tr> <tr> <td><code>direction</code></td> <td><code>string</code></td> <td>The direction the user action in: left, right, up, down, in, out</td> </tr> <tr> <td><code>distance</code></td> <td><code>int</code></td> <td>The distance the user action.</td> </tr> <tr> <td><code>duration</code></td> <td><code>int</code></td> <td>The duration of the action in milliseconds.</td> </tr> <tr> <td><code>fingerCount</code></td> <td><code>int</code></td> <td>The number of fingers used.</td> </tr> <tr> <td><code>fingerData</code></td> <td><code>object</code></td> <td>The coordinates of fingers in event.</td> </tr> <tr> <td><code>currentDirection</code></td> <td><code>string</code></td> <td>The current direction the user is swiping.</td> </tr> </tbody> </table> <h4 id="_swipe_event_swipe">Swipe</h4> <p> To handle <code>swipe</code> event, you must use attribute <code>data-on-swipe</code> or, if your use functionality init method, define method <code>onSwipe</code> in options. </p> <pre><code> <body data-role="touch" data-on-swipe="mySwipeFunction"> ... </body> <script> function mySwipeFunction(...){ ... } </script> </code></pre> <p>or</p> <pre><code> $("body").touch({ onSwipe: function(...){...} }); </code></pre> <h4 id="_swipe_event_swipe_left">Swipe left</h4> <p> To handle <code>swipe left</code> event, you must use attribute <code>data-on-swipe-left</code> or, if your use functionality init method, define method <code>onSwipeLeft</code> in options. </p> <pre><code> <body data-role="touch" data-on-swipe-left="mySwipeFunction"> ... </body> <script> function mySwipeFunction(...){ ... } </script> </code></pre> <p>or</p> <pre><code> $("body").touch({ onSwipeLeft: function(...){...} }); </code></pre> <h4 id="_swipe_event_swipe_right">Swipe right</h4> <p> To handle <code>swipe right</code> event, you must use attribute <code>data-on-swipe-right</code> or, if your use functionality init method, define method <code>onSwipeRight</code> in options. </p> <pre><code> <body data-role="touch" data-on-swipe-right="mySwipeFunction"> ... </body> <script> function mySwipeFunction(...){ ... } </script> </code></pre> <p>or</p> <pre><code> $("body").touch({ onSwipeRight: function(...){...} }); </code></pre> <h4 id="_swipe_event_swipe_up">Swipe up</h4> <p> To handle <code>swipe up</code> event, you must use attribute <code>data-on-swipe-up</code> or, if your use functionality init method, define method <code>onSwipeUp</code> in options. </p> <pre><code> <body data-role="touch" data-on-swipe-up="mySwipeFunction"> ... </body> <script> function mySwipeFunction(...){ ... } </script> </code></pre> <p>or</p> <pre><code> $("body").touch({ onSwipeUp: function(...){...} }); </code></pre> <h4 id="_swipe_event_swipe_down">Swipe down</h4> <p> To handle <code>swipe down</code> event, you must use attribute <code>data-on-swipe-down</code> or, if your use functionality init method, define method <code>onSwipeDown</code> in options. </p> <pre><code> <body data-role="touch" data-on-swipe-down="mySwipeFunction"> ... </body> <script> function mySwipeFunction(...){ ... } </script> </code></pre> <p>or</p> <pre><code> $("body").touch({ onSwipeDown: function(...){...} }); </code></pre> <h4 id="_swipe_event_swipe_status">Swipe status</h4> <p> You can observe <code>swipe</code> status with attribute <code>data-on-swipe-status</code> or method <code>onSwipeStatus</code>. If this function return false, swipe canceled. </p> <pre><code> <body data-role="touch" data-on-swipe-status="mySwipeFunction"> ... </body> <script> function mySwipeFunction(...){ ... } </script> </code></pre> <p>or</p> <pre><code> $("body").touch({ onSwipeStatus: function(...){...} }); </code></pre>  <h3 id="_swipe_pinches">Pinch events</h3> <p>Pinch events receive next arguments:</p> <table class="table cell-border table-border options-table mt-4"> <thead> <tr> <th>Argument</th> <th>Type</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>event</code></td> <td><code>eventObject</code></td> <td>The original event object</td> </tr> <tr> <td><code>direction</code></td> <td><code>string</code></td> <td>The direction the user action in: left, right, up, down, in, out</td> </tr> <tr> <td><code>distance</code></td> <td><code>int</code></td> <td>The distance the user action.</td> </tr> <tr> <td><code>duration</code></td> <td><code>int</code></td> <td>The duration of the action in milliseconds.</td> </tr> <tr> <td><code>fingerCount</code></td> <td><code>int</code></td> <td>The number of fingers used.</td> </tr> <tr> <td><code>fingerData</code></td> <td><code>object</code></td> <td>The coordinates of fingers in event.</td> </tr> <tr> <td><code>zoom</code></td> <td><code>int</code></td> <td>The zoom/scale level the user pinched too, 0-1.</td> </tr> </tbody> </table> <h4 id="_swipe_event_pinch_in">Pinch in</h4> <p> To handle <code>pinch in</code> event, you must use attribute <code>data-on-pinch-in</code> or, if your use functionality init method, define method <code>onPinchIn</code> in options. </p> <pre><code> <body data-role="touch" data-on-pinch-in="myPinchFunction"> ... </body> <script> function myPinchFunction(...){ ... } </script> </code></pre> <p>or</p> <pre><code> $("body").touch({ onPinchIn: function(...){...} }); </code></pre> <h4 id="_swipe_event_pinch_out">Pinch out</h4> <p> To handle <code>pinch out</code> event, you must use attribute <code>data-on-pinch-out</code> or, if your use functionality init method, define method <code>onPinchOut</code> in options. </p> <pre><code> <body data-role="touch" data-on-pinch-out="myPinchFunction"> ... </body> <script> function myPinchFunction(...){ ... } </script> </code></pre> <p>or</p> <pre><code> $("body").touch({ onPinchOut: function(...){...} }); </code></pre> <h4 id="_swipe_event_pinch_status">Pinch status</h4> <p> You can observe <code>pinch</code> status with attribute <code>data-on-pinch-status</code> or method <code>onPinchStatus</code>. </p> <pre><code> <body data-role="touch" data-pinch-status="myPinchFunction"> ... </body> <script> function myPinchFunction(...){ ... } </script> </code></pre> <p>or</p> <pre><code> $("body").touch({ onPinchStatus: function(...){...} }); </code></pre> <h3 id="_swipe_taps">Tap events</h3> <p>Tap events receive next arguments:</p> <table class="table cell-border table-border options-table mt-4"> <thead> <tr> <th>Argument</th> <th>Type</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>event</code></td> <td><code>eventObject</code></td> <td>The original event object</td> </tr> <tr> <td><code>target</code></td> <td><code>DOMObject</code></td> <td>The element clicked on</td> </tr> </tbody> </table> <h4 id="_swipe_event_tap">Tap</h4> <p> To handle <code>tap</code> event, you must use attribute <code>data-on-tap</code> or, if your use functionality init method, define method <code>onTap</code> in options. </p> <pre><code> <body data-role="touch" data-tap="myTapFunction"> ... </body> <script> function myTapFunction(...){ ... } </script> </code></pre> <p>or</p> <pre><code> $("body").touch({ onTap: function(...){...} }); </code></pre> <h4 id="_swipe_event_tap_double">Double tap</h4> <p> To handle <code>double tap</code> event, you must use attribute <code>data-on-double-tap</code> or, if your use functionality init method, define method <code>onDoubleTap</code> in options. </p> <pre><code> <body data-role="touch" data-on-double-tap="myTapFunction"> ... </body> <script> function myTapFunction(...){ ... } </script> </code></pre> <p>or</p> <pre><code> $("body").touch({ onDoubleTap: function(...){...} }); </code></pre> <h4 id="_swipe_event_tap_long">Long tap</h4> <p> To handle <code>long tap</code> event, you must use attribute <code>data-on-long-tap</code> or, if your use functionality init method, define method <code>onLongTap</code> in options. </p> <pre><code> <body data-role="touch" data-long-tap="myTapFunction"> ... </body> <script> function myTapFunction(...){ ... } </script> </code></pre> <p>or</p> <pre><code> $("body").touch({ onLongTap: function(...){...} }); </code></pre> <h4 id="_swipe_event_hold">Hold</h4> <p> To handle <code>hold</code> event, you must use attribute <code>data-on-hold</code> or, if your use functionality init method, define method <code>onHold</code> in options. </p> <pre><code> <body data-role="touch" data-hold="myTapFunction"> ... </body> <script> function myTapFunction(...){ ... } </script> </code></pre> <p>or</p> <pre><code> $("body").touch({ onHold: function(...){...} }); </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>