Advanced jQuery Mobile tutorial – Part 5 – Touch Gestures

Written by on April 8, 2015

Advanced jQuery Mobile tutorial – Part 5 – Touch Gestures

I haven’t done jQuery Mobile article for quite a while. A time has come to talk about a new topic, this time we’ll discuss touch gestures.

On its own jQuery Mobile supports only two gestures, swipe left and swipe right. In one of my previous articles, I showed you how to implement swipe up and swipe down but I never talked about other touch gestures. This article will try to fix this.

jQuery Mobile on its own can’t support other touch gestures, that’s why we need to include another library called Hammer.js. It is an open-source library that can recognize gestures made by touch, mouse and pointerEvents. It doesn’t have any dependencies, and it’s small, only 3.96 kB minified + gzipped!

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!

Table of Contents

[spoiler title=” Click here if you want to see other tutorials, this is the 5th tutorial out of 5 total.”]

  1. Advanced jQuery Mobile tutorial – Part 1 – Responsive design
  2. Advanced jQuery Mobile tutorial – Part 2 – Client / Server Communication
  3. Advanced jQuery Mobile tutorial – Part 3 – Dynamic Content
  4. Advanced jQuery Mobile tutorial – Part 4 – Learning resources
  5. Advanced jQuery Mobile tutorial – Part 5 – Touch Gestures

[/spoiler]

Links

GitHub
Documentation
Hammer.js emulate multi-touch

Example

I wrote this example for mobile devices (smartphones and tablets) but you will be able to use it on your desktop browser.

Demo

Embedded working example

jQuery Mobile + Hammer.js example

Note: To test this example on desktop browsers hold a SHIFT key and drag your mouse pointer, you'll be able to resize blue rectangle.

Code

HTML:

<!DOCTYPE html>
<html>
    
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
        <link rel="stylesheet" href="style.css" />
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.1.3/hammer.min.js"></script>
	<script src="http://example.gajotres.net/include/touchemulator/touch-emulator.js"></script>
        <script src="script.js"></script>
    </head>
    
    <body>
        <div data-role="page" id="index" data-theme="a">
            <div data-role="header">
                 <h3>
                    First Page
                </h3>
            </div>
            <div data-role="content">
                <div class="contents" id="content">	
					
                    <div class="wrap">
                        <div id="square">
                            <div>WIDTH = <span class="square-width"></span></div>
			    <div>HEIGHT =  <span class="square-height"></span></div>
			    <div id="textbox">Swipe Me!</div>
			</div>
                    </div>

                </div>
            </div>
            <div data-role="footer" data-position="fixed">
                 <h3>
                    Footer
                </h3>			
	    </div>
        </div>
    </body>

</html>
Continue Reading

Categories

2 thoughts on “Advanced jQuery Mobile tutorial – Part 5 – Touch Gestures”

  1. hi I'm developing an application with phonegap framework [beginner]
    [Html 5 / css3 / jquery mobile / jquery / javascript] how I can display the content of the xml file in my application
    using Http Request from xml to ajax to display the contents of the xml file in the jquery mobile

    for exemple
    i want to display xml data on listview

    <cars>
    <car>
    <type> Subaru</type>
    <driver>X</driver>
    </car>
    <car>
    <type> BMW</type>
    <driver>Y</driver>
    </car>
    <car>
    <type> FORD</type>
    <driver>Z</driver>
    </car>
    </cars>

    i want to show those data on a listview on my page
    using <ul data-role="listview">
    <li></li>
    </ul>
    call them by ajax to display it
    with xmlhttp request

    thanks

Leave a Reply