jQuery Mobile, Show Products as Pages

jQuery Mobile is a touch-and-swipe optimized web framework built to make it much faster to develop mobile web applications, including ecommerce applications.

Once downloaded and installed, jQuery Mobile can treat content from a single HTML5 file as separate pages. As an example, several similar products might be loaded in a single HTML5 file and then displayed as individual product detail pages.

This article takes a quick look at starting a jQuery mobile web application, and demonstrates how to treat sections of a single HTML5 document like individual pages.

Downloading and Including jQuery Mobile

At a minimum, employing the jQuery Mobile framework requires that you add to JavaScript libraries to the HTML5 markup. The first of these JavaScript files is the jQuery JavaScript Library, which may be downloaded from the jQuery website.

The jQuery Library may also be added to a mobile project from a content delivery network, which is recommended for most applications. But if it is important for the mobile web application to function offline, it may be better to actually download and include the library.

The second JavaScript file necessary, is — not surprisingly — the jQuery Mobile Framework.

These files should be added to the HTML5 markup so that the jQuery Library is listed before jQuery Mobile.

<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.1.1.js"></script>

jQuery Mobile also requires a CSS file.

<link rel="stylesheet" media="all" href="jquery.mobile-1.1.1.css"/>

As mentioned above these files may also have been added from a content delivery network, or CDN.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

Create a Page

With the jQuery Mobile framework, it is possible to have more than one page in a single HTML5 file.

As an example, take a look at the following HTML5 markup, and notice the use the HTML5 data-* attributes.

<section data-role="page" id="pageone">
	<header data-role="header">
		<h1>Asics GELNimbus</h1>	
	</header>
	<div data-role="content" class="product-detail">
		<section class="ui-grid-a">
			<img class="ui-block-a" src="mens-asics-gel-nimbus-14-neon-yellow-navy-lightning.jpg" alt="Asics Gel-Nimbus 14 In Yellow">
			<div class="ui-block-b">
				<p>The GEL-Nimbus 14 brings with it a sleeker profile than its predecessors while maintaining its famously plush, yet stable ride.</p>
				<p id="price">$159.99</p>
			</div>
		</section>
		<button data-role="button">Add to Cart</button>	
		<a href="#pagetwo">Also available in Black</a>	
	</div>
</section><!-- #pageone -->

The primary section element has a data-role attribute of page. This attribute tells jQuery to treat this section as if it was its own page.

For the header element inside of this page a similar data-role is used. It will tell jQuery mobile to treat this element as the page header.

<header data-role="header">
	<h1>Asics GELNimbus</h1>	
</header>

Although it is only a section in an HTML5 document, this section is displayed like a page.

Notice also that the section element with the page data-role has an id of “pageone.” In jQuery Mobile, links between pages that are contained in a single HTML5 file are managed by calling the desired page’s (element’s) id. An example of this is found in the link near the bottom of the example code.

<a href="#pagetwo">Also available in Black</a>	

Add Columns

jQuery Mobile also makes it easy to display content in columns. To get a two-column layout, I added the class ui-grid-a to the included section element containing the product image and the product description.

Then each of the child elements in this section is also assigned a class name, ui-block-a and ui-block-b respectively.

<section class="ui-grid-a">
	<img class="ui-block-a" src="mens-asics-gel-nimbus-14-neon-yellow-navy-lightning.jpg" alt="Asics Gel-Nimbus 14 In Yellow">
	<div class="ui-block-b">
		<p>The GEL-Nimbus 14 brings with it a sleeker profile than its predecessors while maintaining its famously plush, yet stable ride.</p>
		<p id="price">$159.99</p>
	</div>
</section>

jQuery Mobile has other column options too. If the parent element — the section in the code above — had been given the class ui-grid-b, a three-column layout would have been implied. A class of ui-grid-c is for four-column layouts, and ui-grid-d is for five-column layouts.

The blocks within the parent element are also give class names wherein the trailing letter indicates the order.

Page in the Context of a Single File

To put this jQuery Mobile page into context, consider the HTML below. Notice that this is a single file, but that it contains two jQuery Mobile pages.

<!doctype html>
<html>

	<head>
		<meta charset="utf-8"/>
		
		<link rel="stylesheet" media="all" href="jquery.mobile-1.1.1.css"/>
		<script src="jquery-1.8.2.min.js"></script>
		<script src="jquery.mobile-1.1.1.js"></script>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<style>
			.product-detail p { padding-left: 5px;}
			.product-detail img { border: 2px solid whitesmoke; }
		</style>
	</head>
	
	<body lang="en">
		<section data-role="page" id="pageone">
			<header data-role="header">
				<h1>Asics GELNimbus</h1>	
			</header>
			<div data-role="content" class="product-detail">
				<section class="ui-grid-a">
					<img class="ui-block-a" src="mens-asics-gel-nimbus-14-neon-yellow-navy-lightning.jpg" alt="Asics Gel-Nimbus 14 In Yellow">
					<div class="ui-block-b">
						<p>The GEL-Nimbus 14 brings with it a sleeker profile than its predecessors while maintaining its famously plush, yet stable ride.</p>
						<p id="price">$159.99</p>
					</div>
				</section>
				<button data-role="button">Add to Cart</button>	
				<a href="#pagetwo">Also available in Black</a>	
			</div>
		</section><!-- #pageone -->
		
		<section data-role="page" id="pagetwo">
			<header data-role="header">
				<h1>Asics GELNimbus</h1>	
			</header>
			<div data-role="content" class="product-detail">
				<section class="ui-grid-a">
					<img class="ui-block-a" src="mens-asics-gel-nimbus-14-black-digital-neon-orange.jpg" alt="Asics Gel-Nimbus 14 In Black">
					<div class="ui-block-b">
						<p>The GEL-Nimbus 14 brings with it a sleeker profile than its predecessors while maintaining its famously plush, yet stable ride.</p>
						<p id="price">$159.99</p>
					</div>
				</section>
				<button data-role="button">Add to Cart</button>	
				<a href="#pageone">Also available in Yellow</a>	
			</div>
		</section><!-- #pagetwo -->
		
	</body>
	
</html>

Clicking the link at the bottom of a page will initiate a page transition to the second enclosed page. As far as the app’s users will be concerned, these are separate pages.

Although the jQuery Mobile pages are in the same document they are displayed and linked as individual pages.

Summing Up

This article briefly described how to set up a jQuery Mobile application, create pages, and link between pages. Needles to say, the framework can be used to develop significantly more complex applications.