A First Example

Contact Us or call 1-877-932-8228
A First Example

A First Example

Let's look at a simple jQuery Mobile-based demonstration: we'll rig up a low-fi page from which users can filter and select from a few jazz clubs, as shown on the left. Tapping the club brings the user to a detail page, with map, as shown on the right:

Jazz Calendar - jQuery Mobile on iPhone

Open the file jQueryMobile/Demos/jazz/index.html in your browser (preferably from a smartphone) and in your file editor.

Code Sample:

jQueryMobile/Demos/jazz/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>
</head> 
<body> 

<div data-role="page">

	<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="bakers-keyboard-lounge.html">Baker's Keyboard Lounge</a></li>
			<li><a href="blues-alley.html">Blues Alley</a></li>
			<li><a href="el-chapultepec.html">El Chapultepec</a></li>
			<li><a href="village-vanguard.html">Village Vanguard</a></li>
		</ul>
	</div>

</div>

</body>
</html>

Code Explanation:

We include three external files - a stylesheet and two JavaScript files, for jQuery and jQuery Mobile. These three files are all hosted externally, at code.jquery.com. We could, of course, download and host these files ourselves, locally - we would need to do this if working without an internet connection.

Three divs wrap our content:

  1. <div data-role="page"> is the outermost wrapper;
  2. <div data-role="header"> wraps the header of the page;
  3. <div class="ui-content" role="main"> wraps the main content for the page.

These specific attribute values for the various <div>s are significant and specific for jQuery Mobile - using them ensures that jQuery Mobile's CSS and JavaScript functionality works in a self-consistent manner.

The form and unordered list markup in index.html enables the filter-as-you-type functionality, limiting the results shown to those items whose display text matches the typed text. Each individual list item is a link to a club-specific detail page.

Tapping the link to any of the detail pages shows the title of the page, the venue's address, a map of the location, and a link ("Home") back to the main page. Let's take a look at code from one of those pages:

Code Sample:

jQueryMobile/Demos/jazz/bakers-keyboard-lounge.html
<!DOCTYPE html> 
<html> 
	<head> 
	<title>Jazz Calendar: Baker's Keyboard Lounge</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>
</head> 
<body> 

<div data-role="page">

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

</body>
</html>

Code Explanation:

Again, divs denoting the "page", "header", and "content", respectively, mark up our content. We exploit the convenient Google Maps static-map-from-address image: supplying GET parameters for the center of the map and the marker to show allows us to easily render a useful map of the location. Setting class="ui-btn ui-icon-home ui-btn-icon-left" for the link back to the "Home" page displays the bottom link as a mobile-friendly button (from class ui-btn); the latter two classes sets the icon for the button as jQuery Mobile's canned "home" icon.

Next