Swipe gestures in jQuery Mobile apps

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

Enabling swipe between page divs
<span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>

<code class='javascript'><span class='line'><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'pageinit'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">){</span>
</span><span class='line'>  <span class="nx">$</span><span class="p">(</span><span class="s1">'div.ui-page'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s2">"swipeleft"</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="kd">var</span> <span class="nx">nextpage</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">next</span><span class="p">(</span><span class="s1">'div[data-role="page"]'</span><span class="p">);</span>
</span><span class='line'>      <span class="k">if</span> <span class="p">(</span><span class="nx">nextpage</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="nx">$</span><span class="p">.</span><span class="nx">mobile</span><span class="p">.</span><span class="nx">changePage</span><span class="p">(</span><span class="nx">nextpage</span><span class="p">,</span> <span class="s2">"slide"</span><span class="p">,</span> <span class="kc">false</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">$</span><span class="p">(</span><span class="s1">'div.ui-page'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s2">"swiperight"</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="kd">var</span> <span class="nx">prevpage</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">prev</span><span class="p">(</span><span class="s1">'div[data-role="page"]'</span><span class="p">);</span>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="nx">prevpage</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">$</span><span class="p">.</span><span class="nx">mobile</span><span class="p">.</span><span class="nx">changePage</span><span class="p">(</span><span class="nx">prevpage</span><span class="p">,</span> <span class="p">{</span> <span class="nx">transition</span><span class="o">:</span> <span class="s2">"slide"</span><span class="p">,</span> <span class="nx">reverse</span><span class="o">:</span> <span class="kc">true</span> <span class="p">},</span> <span class="kc">true</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'><span class="p">});</span>
</span></code>

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

Including jQuery Mobile
<span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>

<code class='html'><span class='line'><span class="nt"><script </span><span class="na">src=</span><span class="s">"https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"</span><span class="nt">></script></span>
</span><span class='line'><span class="c"><!-- add pageinit swipe initialization here --></span>
</span><span class='line'><span class="nt"><script </span><span class="na">src=</span><span class="s">"https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.m..."</span><span class="nt">></script></span>
</span></code>

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

This story, "Swipe gestures in jQuery Mobile apps" was originally published by JavaWorld.

Next read this:

When Andrew Glover isn't listening to “Funkytown” or “Le Freak” he enjoys speaking on the No Fluff Just Stuff Tour. He also writes articles for multiple online publications including IBM's developerWorks and O'Reilly’s ONJava and ONLamp portals.

Copyright © 2013 IDG Communications, Inc.