https://www.developer.com/ws/using-jquery-mobile-theming.html

Back to article

jQuery Mobile for Device-agnostic Mobile Web Applications


November 24, 2010

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.

 

Loading a Simple jQuery Mobile Page
Figure 1. Loading a Simple jQuery Mobile Page

 

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.

 

Linking to an Internal jQuery Mobile Page
Figure 2. Linking to an Internal jQuery Mobile Page

 

Using Mobile Theming

While you're certainly free to use standard HTML elements within your mobile applications, one of jQuery Mobile's most interesting features is the ability to enhance these elements to fit the conventions of a modern mobile application. For instance, consider the following itemized list:

<div data-role="content">	
  <ul>
    <li>Beginning PHP and MySQL, Fourth Edition</li>
    <li>Easy PayPal with PHP</li>
    <li>Easy PHP Websites with the Zend Framework</li>
    <li>Easy Website Deployment with Phing</li>
  </ul>
</div>

Loaded to the browser, this page looks pretty unappealing, as presented in Figure 3.

 

A Plain HTML Page in jQuery Mobile
Figure 3. A Plain HTML Page in jQuery Mobile

 

However, you can turn this very same list into the very slick mobile-themed version presented in Figure 4, simply by adding the attribute data-role="listview" to the <ul> element.

 

Stylizing a List with jQuery Mobile
Figure 4. Stylizing a List with jQuery Mobile

 

Even better, you can use one of jQuery Mobile's theme packages by adding the attribute data-theme="X" to the <ul> element (where X refers to the name of the theme package). For instance, set X to a, and the list presented in Figure 4 will be transformed to the list presented in Figure 5. Incidentally, while you can add the data-theme attribute where ever you please, the proper way to do so is by adding it to the DIV associated with the page data role.

 

Using a jQuery Mobile Theme
Figure 5. Using a jQuery Mobile Theme

 

I'm not sure why the cryptic name of a was chosen for this particular theme package; perhaps it's simply a matter of the jQuery Mobile team not having yet decided upon a more memorable name. At any rate, this is one of five available theme packages (a, b, c, d, and e). Try experimenting with these to see what each has to offer!

Conclusion

According to a Gartner report published earlier this year, worldwide mobile device sales totaled an astounding 325.6 million units in the second quarter alone. Companies on every corner of the planet are scrambling to capture market share, releasing devices of all shapes, sizes, and capabilities. Although some of these companies are attempting to establish information fiefdoms, the Web remains by far the primary means for online interaction, and with that comes serious challenges for developers seeking to cater to mobile users. The jQuery Mobile project presents a promising solution.

This is but a mere introduction to what is already shaping up to be one of the hottest technologies of the coming year. Stay tuned as I'll almost certainly be investigating additional jQuery Mobile features in future articles!

About the Author

Jason Gilmore is founder of the publishing, training and consulting firm WJGilmore.com. He also is the author of several popular books including "Easy PHP Websites with the Zend Framework", "Easy PayPal with PHP", and "Beginning PHP and MySQL, Fourth Edition". Follow him on Twitter at @wjgilmore.

Sitemap | Contact Us

Thanks for your registration, follow us on our social networks to keep up-to-date