I've released an update to my jQuery Mobile PHP MVC Framework, check out the blog post for details and to download it!

This past weekend, John Resig (creator of jQuery) announced the release of the alpha version of jQuery Mobile, a simple and lightweight JavaScript framework for mobile web development. In this article, we'll take a look at how easy it is to create a simple mobile website using framework, complete with dynamic (AJAX) page loading, iOS-style design and slick page transitions.

Download

How to Use jQuery Mobile

jQuery Mobile is incredibly easy to use, just include the jQuery Mobile files in your header and add a few data attributes to your markup and you're set. All of the styling is handled by jQuery and the included CSS file, so you can literally create a complete mobile webpage in minutes. In the example below, we'll create a simple page that loads internal links using a variety of transition effects. The first few steps will outline the generic usage of jQuery Mobile while the rest will take a look at the specific elements used in the demo.

Step 1. Include the jQuery Mobile Files in Header

This step is pretty self-explanatory: just include the framework files. You can download them from the jQuery Mobile site or load the files directly from their site/CDN, which will reduce bandwidth costs and keep your website speedy.

1
2
3
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
Step 2. Use data attribute in HTML markup

Apply data attribute tags to your HTML, where n is the available feature you want to set, for example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div data-role="page" data-theme="b">
  <div data-role="header" data-theme="b">
    <h1>My Site</h1>
  </div>
  <div data-role="content">
    <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a">
      <li data-role="list-divider">Transition Effects</li>
      <li><a href="effects.php?id=slide" data-transition="slide">Slide</a></li>
      <li><a href="effects.php?id=slideup" data-transition="slideup">Slide Up</a></li>
      <li><a href="effects.php?id=slidedown" data-transition="slidedown">Slide Down</a></li>
      <li><a href="effects.php?id=pop" data-transition="pop">Pop</a></li>
      <li><a href="effects.php?id=flip" data-transition="flip">Flip</a></li>
      <li><a href="effects.php?id=fade" data-transition="fade">Fade</a></li>
    </ul>
    <br /><br />
    <ul data-role="listview" data-dividertheme="e">
      <li data-role="list-divider">Seamless List (margin-less)</li>
      <li><a href="#" data-transition="slide">Example Item 1</a></li>
      <li><a href="#" data-transition="slide">Example Item 2</a></li>
      <li><a href="#" data-transition="slide">Example Item 3</a></li>
    </ul>
  </div>
  <div data-role="footer" data-position="fixed">
    <h1>&copy; Copyright Info or Site URL</h1>
  </div>
</div>

The data-role element specifies which DIV/block should be used for the header, footer and content, all of which are inside the main page wrapper. Here are the data attributes used in this example:

  • data-role - specifies the nature of the wrapper element, can be set to: page, header, content, footer. Two other settings were used in the example to indicate list elements and list dividers, for which the attribute was set to: listview for the main list element and list-divider for the list divider. There are a few other available settings, including collapsible, which creates a collapsible/show-hide block (more info).
  • data-position - specifies whether the element should be fixed, in which case it will render at the top (for header) or bottom (for footer)
  • data-inset - specifies whether element should be within content margins or outside of it (flush or with margin) - set to true or false
  • data-transition - specifies which transition to use when loading new pages, can be set to: slide, slideup, slidedown, pop, flip or fade
  • data-theme - specifies which design theme to use for elements within container, can be set to: a, b, c, d, e
  • data-dividertheme - specifies the theme for the list dividers using same options as data-theme
Step 3. Add content and publish online!

Using the above example, the template found on jQueryMobile.com or creating your own layout, populate the blocks with your own content and upload the files. Currently, jQuery Mobile renders the pages the same on mobile and desktop browsers, so you don't necessarily need a smartphone to test it out (though having one can help ironing out bugs).

Accessibility and Precautions

Right now, the alpha version of jQuery Mobile (the only one currently available) is compatible with all versions of Safari for iOS and for most browsers on Android. BlackBerry is partially supported and Windows Mobile is sketchy at best, but rest assured that compatibility will only get better with time, as that is the main goal of jQuery Mobile - creating a widely compatible mobile JavaScript framework. You can view the compatibility chart on the official site but should also follow their blog to get the latest updates too.

That said, is it worth investing the time and energy to use jQuery Mobile over the other available mobile frameworks, even though it's in the alpha development phase right now? I would say yes, absolutely - this is a framework that has huge momentum behind it right now and will only get better with time. As long as you're staying on top of updates and changes, you should definitely start getting familiar with this framework if you're planning on doing some mobile-friendly web development.

An additional benefit of jQuery Mobile is that it makes loading pages using AJAX automatic. Add an iPhone home screen icon to your application and iOS will cleverly hide Safari controls, mimicking native applications.

About the Example

The downloadable example above includes is split into a header and footer file for the sake of convenience, feel free to use whatever coding method you prefer. I may end up creating a simple MVC framework using jQuery Mobile that makes it easier to develop a dynamic mobile app, in which case I'll be sure to post it on this blog. If you'd be interested in something like that, leave a comment below and I'll try to bump up it's priority on my huge list of to-dos.

The first iteration of the jQuery Mobile PHP/MVC Framework is complete.

Conclusion

That wraps it up for part 2 of the Mobile Web Development series. Be sure to check out part 1, an Introduction to Mobile Web Development, if you missed it earlier. In the next part, we'll take a look at the various other mobile web frameworks out there, so stay tuned!

Also a reminder: the AppSumo giveaway contest ends tomorrow - be sure to check out the details and enter (it takes 30 seconds and is free), you could win nearly $400 worth of support products.

And as always, subscribe to our RSS feed and follow us on Twitter if you haven't already!