JQuery Mobile includes 5 touch based events to make navigating your site with a mobile device a little easier. The 5 events are:-
tap – triggered after a tapping an pnscreen element.
taphold – triggered after tapping and holding for around a second on a onscreen element.
swipe – triggered after swiping your finger across an onscreen element in either direction.
swiperight – triggered after swiping your finger in a right direction across an onscreen element.
swipeleft – triggered after swiping your finger in a left direction across an onscreen element.
You can bind to these events like you would any other jQuery event by using either live() or bind().
Example
I have created a quick example demonstarting the jQuery Mobile touch events. Continue reading to view example.
Create a basic jQuery mobile HTML page displaying ball that we will use to demonstrate the touch events in action.
Touch Events Demo
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<!DOCTYPE html><html> <head> <title>jQuery Mobile Events</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="mobileEvents.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> <style> div.ballClass { -moz-border-radius: 50px; border-radius: 50px; margin-left: auto ; margin-right: auto ; padding: 6px; background-color: rgba(0, 25, 255, 0.5); width: 50px; height: 50px; } </style></head><body> <div data-role="page"> <div data-role="header"> <h1>Mobile Events</h1> </div><!-- /header --> <div data-role="content"> <!---- BUTTON ----> <div><p>Swipe Right, Swipe Left or Tap and Hold on the ball to trigger event.</p></div> <div class="ballClass" id="ball"></div> <div id="whichEvent"><p>Event Triggered: None Yet!</p></div> </div><!-- /content --> <div data-role="footer"> <h4></h4> </div><!-- /footer --></div><!-- /page --></body></html> |
Inside the “content” tag we have a div named “ball”, this div shows a blue ball on screen which has been styled using the CSS. The naming (or ID) of this div is important as this is what we will refer to in the javascript.
In the head tag you will see that we have linked to a custom JS file called mobileEvents.js this is where the actions will happen.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
$(function(){ // SWIPE LEFT EVENT // Triggers when a swipe event occurred moving in the left direction. // Triggers when a horizontal drag of 30px or more (and less than 20px vertically) occurs within 1 second duration. // A standard 'swipe' can be used to trigger event regardless of direction $("#ball").bind('swipeleft',function(event, ui){ $("#whichEvent p").replaceWith("<p>Event Triggered: Slide Left</p>"); }) // SWIPE RIGHT EVENT // Triggers when a swipe event occurred moving in the right direction. $("#ball").bind('swiperight',function(event, ui){ $("#whichEvent p").replaceWith("<p>Event Triggered: Slide Right</p>"); }) // TAP HOLD // Triggers after a held complete touch event (close to one second). // A standard 'tap' event is also avliable that triggers after a quick complete touch event. $("#ball").bind('taphold',function(event, ui){ $("#whichEvent p").replaceWith("<p>Event Triggered: Tap Hold</p>"); })}) |
Bind to the “ball” div
|
1
|
$("#ball").bind |
add the event you wish to bind with “ball”
|
1
|
$("#ball").bind('swiperight',function(event, ui) |
inside the event function we can then put our event actions. In this case I have just replaced the paragraph of the div named “whichEvent” with a new paragraph displaying which event just occured.
|
1
|
$("#whichEvent p").replaceWith("<p>Event Triggered: Slide Left</p>"); |
Example (Best viewed on a mobile device!)