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.
Implementing right and left swipes in an jQuery Mobile app is fairly straightforward, but there are a few gotchas that I was able to piece together via multiple stackoverflow threads, blogs, and finally jQuery Mobile’s own documentation.
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
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
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!).
pageinit event like so:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
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
Once you’ve done that, you’ll be able to swipe between page