Using data Attributes

Contact Us or call 1-877-932-8228
Using data Attributes

Using data Attributes

For a next iteration of the swipe-able pages, we'll use HTML5 data- attributes. HTML5, unlike earlier HTML versions, now formally allows - encourages, even - parameter information passing via attributes named data-* on any element. For our purposes here, this means each venue's div can hold information about the pages to which swiping right and left should bring the user:

<div data-role="page" data-next-page="#elchapultepec" data-prev-page="#bakerskeyboardlounge" id="bluesalley">

Using the data attributes, we can write JavaScript event-handling code that is clearer and more concise. Also, this strategy would be much easier to implement if the page for each venue were produced by a content management system.

Open jQueryMobile/Demos/jazz-touch/index-attribute.html from a mobile device or emulator; check out the code with a file editor.

Code Sample:

jQueryMobile/Demos/jazz-touch/index-attribute.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', ".swipeablepage", function() {
			$( "body" ).pagecontainer( "change", $(this).attr('data-prev-page') );
		});
		
		$(document).on('swipeleft', ".swipeablepage", function() {
			$( "body" ).pagecontainer( "change", $(this).attr('data-next-page') );
		});

	</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" data-next-page="#bluesalley" data-prev-page="#villagevanguard" class="swipeablepage" 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="#home" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
	</div>

</div>



<div data-role="page" data-next-page="#elchapultepec" data-prev-page="#bakerskeyboardlounge" class="swipeablepage" 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="#home" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
	</div>

</div>

<div data-role="page" data-next-page="#villagevanguard" data-prev-page="#bluesalley" class="swipeablepage" 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="#home" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
	</div>

</div>

<div data-role="page" data-next-page="#bakerskeyboardlounge" data-prev-page="#elchapultepec" class="swipeablepage" 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="#home" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
	</div>

</div>

</body>
</html>

Code Explanation:

Note that the JavaScript handling the swipe events is much more brief. We bind the swipeleft and swiperight to any div of class swipeablepage - we've chosen not to offer swiping from the home page, though of course we could.

For each swipe event, bring the user to the page represented by the id contained in the respective div's data-next-page (or -prev-page): $( "body" ).pagecontainer( "change", $(this).attr('data-prev-page') )

Next