Can you dig it?

Swipe Gestures in jQuery Mobile Apps

Jul 30th, 2013

I find that swipe gestures for navigating between screens in a mobile app quite nice. Early on 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.

In a jQuery Mobile app, you define pages 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 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 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 like so:

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):