Building a mobile web app with jQuery Mobile

Everything is an app.

Well, maybe not, but it seems that we're heading that way these days. Whilst there are obvious merits to developing native iPhone or Android apps, the alternative approach of building a cross-platform mobile website also has its advantages, primarily being one system to maintain. The jQuery Mobile framework makes this easier than ever before with a touch optimised UI straight out of the box.

This article is a walk through the process of developing the UI for a mobile online ordering system for a cafe. Please note that the interaction of the mobile website with the server is beyond the scope of this article. We will build a multi page site with jQuery Mobile with the assumption that a programmer will populate the site dynamically with data from a server using JSON, etc.

Getting started

I won't go into setting up the core jQuery Mobile files; you can get all that from the quick start guide. Just remember that you need to call the core jQuery first, and you'll need to load both the JS and CSS jQuery mobile files, plus have the image sprite in the relevant location so you can use the icons where needed.

Here's a sample structure using the CDN versions of the relevant JS and CSS files:

<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile demo</title>
	<link rel="stylesheet" href="//code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
	<script src="//code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="//code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
	<!-- app content here -->
</body>
</html>

The multi-page structure

For our cafe ordering app, we want a relatively fast transition between pages so the multi-page template is best for this. Note that this structure relies heavily on Javascript, as AJAX is used to load the content of different pages and the initial page load is much heavier. We're working on the assumption that the user will be prepared to wait for the initial load and they consider this to be an 'app', rather than a website.

The multi-page structure is all about data-role="page" attribute. So within the tags of your HTML document, you need to set up your pages like so:



Note the id attribute of each 'page' div will serve as the page name and will be used as the href location when linking between pages; so you would link to the "Full Menu" page like so:

	<a href="#full-menu">Full Menu</a>

Listview

Now you want to make a touch-friendly main navigation for this app. jQuery Mobile makes this really easy with their data-role="listview" attribute. Simply create an unordered list like so:

	
    <li><a href="#full-menu">Full Menu</a></li> <li><a href="#basket">Basket</a></li> <li><a href="#current-orders">Current Orders</a></li> <li><a href="#our-location">Our Location</a></li> <li><a href="#logout">Logout</a></li>

Buttons & Icons

Creating buttons in jQuery Mobile is extremely easy. It will automatically render <button> elements with its default button style, and to have other elements appear in this style, simply use the data-role=button attribute.

	<a href="#" data-role="button">View Order</a>

To add icons to your buttons, use the data-icon= attribute with the relevant icon name. The icon will appear on the left by default, however it is also possible to position it on the right with data-iconpos="right", as shown below:

	<a href="#settings" data-role="button" data-icon="gear">
	Settings</a>
	<a href="#" data-role="button" data-icon="delete" data-iconpos="right">
	Delete</a>

Alternatively, you can use data-iconpos="notext" to display an icon-only button

	<a href="#" data-role="button" data-icon="delete" 
	data-iconpos="notext">Delete</a>

Page Header

At the top of every page, we want a header with our logo and two key usability buttons: 'back' and 'home'. Inside your 'data-role=page', create a div with data-role="header", and add an h1 for your logo and two links, one for each of your buttons. Note: I have split the link code over multiple lines below for readability.

<div data-role="header">
    <h1>Logo</h1>
    <a href="#"
        data-role="button"
        data-icon="arrow-l" 
        data-iconpos="notext"        
        data-direction="reverse"
        data-rel="back">
        Back</a>
    <a href="#main-navigation" 
        data-role="button"
        data-icon="home" 
        data-iconpos="notext"
        data-direction="reverse">
        Home</a>
</div>

jQuery Mobile will detect that you have two links inside the data-role=header container and will automatically position the first of the left side and the second on the right side, with the h1 in the centre.

........this article is still under construction........





3 Responses to “Building a mobile web app with jQuery Mobile”

  1. Gbenga says:

    Awwwww……. Am enjoying the tutorials…..pls continue

  2. Alfonso says:

    any update on this tutorial. is there a second part of it? Wonderful explanation.