jQuery Mobile for Device-agnostic Mobile Web Applications

Many developers have been actively working on ways to effectively build mobile-based Web applications that can work seamlessly on the dizzying array of devices. One of the most promising projects to enable this is jQuery Mobile. Although still only an alpha release, jQuery Mobile is already shaping up to be every bit as promising as its parent project.

JQuery Mobile intends to provide developers with a unified set of interface tools that ensure the highest level of cross-mobile browser support. Based on HTML5, jQuery and CSS, JQuery Mobile aims to provide a rich, interactive interface to capable devices, while allowing that same interface to degrade gracefully when used in conjunction with less capable devices. This capability also makes it easy to test your mobile applications within a standard desktop browser, although you of course should test on a variety of mobile devices before launching the product.

This article is an introduction to the jQuery Mobile project. Before executing any of the examples in the following sections, remember that at the time of this writing jQuery Mobile was a bleeding-edge project; it is likely to change dramatically in the months to come. So while you can certainly use what you learn in this tutorial as a guide, keep in mind that the syntax could have quite possibly changed.

The jQuery Mobile Page Structure

The typical jQuery Mobile page structure looks like a typical HTML document, consisting of a page header, main body, and footer. Sandwiched between the HTML <head> tag, you'll find references to the jQuery library, jQuery Mobile library, and jQuery Mobile CSS, all of which can be referenced directly from the jQuery CDN. Here's what a simple page looks like:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>W.J. Gilmore, LLC</title>



<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />

<link rel="apple-touch-icon" href="img/tutsTouchIcon.png" />



<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

<script type="text/javascript"

src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>



</head>



<body>



<div data-role="page">



<div data-role="header" id="home">

<h1>WJGilmore, LLC</h1>

</div>



<div data-role="content">

<p>Check back regularly for the latest information about Jason's books!</p>

</div>



<div data-role="footer">

<h1>Copyright © 2010 W.J. Gilmore, LLC</h1>

</div>

</div>





</body>



</html>

Load this page within the browser (desktop or mobile) and you'll see a page that looks similar to the one presented in Figure 1.

As you can see, jQuery Mobile is automatically styling the header and the footer, which are identified by the data-role attribute values of header and footer , respectively. Element attributes and their associated values play a fundamental role throughout jQuery Mobile, as you'll see in the examples that follow.

Linking to Internal Pages

Logically, your website will consist of more than one page. Because of the relatively simplistic nature of mobile pages, you can easily manage several within a single document, layering each set of page DIVs one atop the next. To link from one internal page to another, you'll use the familiar HTML anchor # ) syntax. Here is an example:

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

...

<div data-role="content">

<p><a href="#epwzf">Easy PHP Websites with the Zend Framework</a></p>

</div>

...

</div>



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



<div data-role="header">

<h1>WJGilmore, LLC</h1>

</div>



<div data-role="content">

<strong>Easy PHP Websites with the Zend Framework</strong><br />

<p>

<em>Easy PHP Websites with the Zend Framework</em> is the ultimate

introduction to the popular Zend Framework, covering practical topics

including Doctrine, Zend_Db, Zend_Test, automated deployment, and much

more!

</p>

</div>



<div data-role="footer">

<h1>Copyright © 2010 W.J. Gilmore, LLC</h1>

</div>

</div>

Notice how the link found in the page identified by the home ID references the page identified by the epwzf identifier. While this is a convenient way to reference internal pages, it means you cannot use HTML's anchor tag for its original purpose. I suspect this will change in due time, so keep an eye on the documentation. Clicking on the link takes the user to the page presented in Figure 2. Notice the automatic inclusion of a Back button in the page header.

Page 1 of 2