Swipe gestures in jQuery Mobile apps

I find that swipe gestures [1] for navigating between screens in a mobile app quite nice [2]. Early on [3] in my mobile development journey, I found myself instinctively adding navigation buttons, but quickly found them cumbersome for users to tap; plus, those buttons took up precious screen real estate! Gestures, on the other hand, free up screen space by removing needless buttons and give users a more interactive experience.

Implementing right and left swipes in an jQuery Mobile [4] app is fairly straightforward, but there are a few gotchas that I was able to piece together via multiple stackoverflow threads [5], blogs, and finally jQuery Mobile’s own documentation [6].

In a jQuery Mobile app, you define pages [7] within div tags that represent a UI screen – you can then declare transitions between pages well – slide, flip, etc. The key aspect with swiping between page divs is the selector for them, which is div[data-role='page'].

Once you have a handle to that div, you can proceed forward with a left swipe via jQuery’s next [8] function. Conversely, swiping right with the intent of going back is facilitated by finding the previous matching div[data-role='page'] via jQuery’s prev [9] function.

Also note, going backwards via a swipe requires that you reverse the slide transition, otherwise it looks misleading to the user (i.e. the transition is from left to right rather than the other way around!).

Accordingly, the JavaScript for swipe gestures should be placed within a pageinit event [10] like so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$(document).on('pageinit', function(event){
  $('div.ui-page').on("swipeleft", function () {
    var nextpage = $(this).next('div[data-role="page"]');
      if (nextpage.length > 0) {
        $.mobile.changePage(nextpage, "slide", false, true);
      }
  });

  $('div.ui-page').on("swiperight", function () {
    var prevpage = $(this).prev('div[data-role="page"]');
    if (prevpage.length > 0) {
      $.mobile.changePage(prevpage, { transition: "slide", reverse: true }, true, true);
    }
  });
});

Note, this script should be referenced in your DOM before you pull in the jQuery mobile js file. That is, put the code above where you add jQuery mobile in your document’s header (but after you load jQuery itself):

1
2
3

<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
<!-- add pageinit swipe initialization here -->
<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

Once you’ve done that, you’ll be able to swipe between page divs.