Swiping to Change Pages

Contact Us or call 1-877-932-8228
Swiping to Change Pages

Swiping to Change Pages

We'll extend our find-a-jazz-club pages from the previous example to allow the user to swipe right and left to navigate from one detail page to the next, rather than having to return to the home screen each time. Open jQueryMobile/Demos/jazz-touch/index.html from a smartphone or emulator, and take a look at the code in your file editor.

Code Sample:

jQueryMobile/Demos/jazz-touch/index.html
<!DOCTYPE html> 
<html> 
	<head> 
	<title>Jazz Calendar</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
	<script type="text/javascript">
		$(document).on('swiperight', "#bakerskeyboardlounge", function() {
			$( "body" ).pagecontainer( "change", "#villagevanguard" );
		});
		$(document).on('swipeleft', "#bakerskeyboardlounge", function() {
			$( "body" ).pagecontainer( "change", "#bluesalley" );
		});
		$(document).on('swiperight', "#bluesalley", function() {
			$( "body" ).pagecontainer( "change", "#bakerskeyboardlounge" );
		});
		$(document).on('swipeleft', "#bluesalley", function() {
			$( "body" ).pagecontainer( "change", "#elchapultepec" );
		});
		$(document).on('swiperight', "#elchapultepec", function() {
			$( "body" ).pagecontainer( "change", "#bluesalley" );
		});
		$(document).on('swipeleft', "#elchapultepec", function() {
			$( "body" ).pagecontainer( "change", "#villagevanguard" );
		});
		$(document).on('swiperight', "#villagevanguard", function() {
			$( "body" ).pagecontainer( "change", "#elchapultepec" );
		});
		$(document).on('swipeleft', "#villagevanguard", function() {
			$( "body" ).pagecontainer( "change", "#bakerskeyboardlounge" );
		});
	</script>
</head> 
<body> 

<div data-role="page" id="home">
	<div data-role="header">
		<h1>Jazz Calendar</h1>
	</div>

	<div class="ui-content" role="main">
		<p>Use the filter below to find concerts near you:</p>
		<form class="ui-filterable">
			<input id="filter-input" data-type="search">
		</form>
		<ul data-role="listview" data-filter="true" data-input="#filter-input">
			<li><a href="#bakerskeyboardlounge">Baker's Keyboard Lounge</a></li>
			<li><a href="#bluesalley">Blues Alley</a></li>
			<li><a href="#elchapultepec">El Chapultepec</a></li>
			<li><a href="#villagevanguard">Village Vanguard</a></li>
		</ul>
	</div>

</div>

<div data-role="page" id="bakerskeyboardlounge">

	<div data-role="header">
		<h1>Baker's Keyboard Lounge</h1>
	</div>

	<div class="ui-content" role="main">
		<address>2050 Livernois Ave
		<br>Detroit, Michigan 48221</address>
		<img src="https://maps.googleapis.com/maps/api/staticmap?center=2050%20Livernois%20Ave,%20Detroit,%20MI&zoom=14&size=288x200&markers=2050%20Livernois%20Ave,%20Detroit,%20MI&sensor=false" height="200" width="288" />
		<a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
	</div>

</div>

<div data-role="page" id="bluesalley">

	<div data-role="header">
		<h1>Blues Alley</h1>
	</div>

	<div class="ui-content" role="main">
		<address>1073 Wisconsin Ave. NW
		<br>Washington, DC 20007</address>
		<img src="https://maps.googleapis.com/maps/api/staticmap?center=1073%20Wisconsin%20Ave.%20NW%20Washington,%20DC&zoom=14&size=288x200&markers=1073%20Wisconsin%20Ave.%20NW%20Washington,%20DC&sensor=false" height="200" width="288" />
		<a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
	</div>

</div>

<div data-role="page" id="elchapultepec">

	<div data-role="header">
		<h1>El Chapultepec</h1>
	</div>

	<div class="ui-content" role="main">
		<address>1962 Market St
		<br>Denver, CO 80202</address>
		<img src="https://maps.googleapis.com/maps/api/staticmap?center=1962%20Market%20St.%20Denver,%20CO&zoom=14&size=288x200&markers=1962%20Market%20St.%20Denver,%20CO&sensor=false" height="200" width="288" />
		<a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
	</div>

</div>

<div data-role="page" id="villagevanguard">

	<div data-role="header">
		<h1>Village Vanguard</h1>
	</div>

	<div class="ui-content" role="main">
		<address>178 7th Avenue South, New York, NY 10014
		<br></address>
		<img src="https://maps.googleapis.com/maps/api/staticmap?center=178%207th%20Avenue%20South,%20New%20York,%20NY&zoom=14&size=288x200&markers=178%207th%20Avenue%20South,%20New%20York,%20NY&sensor=false" height="200" width="288" />
		<a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
	</div>

</div>

</body>
</html>

The first thing you notice is that there's only one file here. We've changed the file architecture from the last example: where the previous demo code presented each individual-venue page as a separate file, we now present each individual-venue page as separate divs, each with data-role="page", in the same index.html file. Note that each page div has a unique id, which we'll use to reference the "page" in links. To the user, this is transparent - jQuery Mobile's Ajax-based page transitions hide this implementation detail.

In the head of the page, we create rules for each page's swipeleft and swiperight event: swiping right on the #bakerskeyboardlounge, for instance, brings the user to the #bluesalley page. The code $.mobile.changePage('#bluesalley') effects this.

One can see that this process - detailing the right- and left-swipe page links for each page - might get pretty onerous as the number of pages grows. Let's see if we can handle this a little more elegantly.

Next