A (not so) long time ago there was this little framework created called jQTouch. This for me was an amazing moment because, as the name implies, it was written on top of jQuery. I ❤ jQuery. A mobile framework that works with jQuery simply excited me beyond words.

At the time, I needed an excuse to build a mobile website so I wrote some crappy single page apps just to get my feet wet. It was pretty awesome. The only downside for me was that it was a bit sluggish. The animations were still very impressive. There are a bunch baked in animations that can satisfy your transition needs. There is also an option to create your very own transitions with very limited code.

After some time, I decided that I’d do a mobile version of my resume. Why not?! I could use this project as a great excuse to:

  1. Have a mobile version of my resume (I’m a dev, this could impress potential employees…)
  2. Learn the jQTouch framework and have fun doing it (since I’m doing it for myself)
  3. Find a new job..

It came out fantastic. It took only a few hours to put together and it did what I wanted it to do: look awesome and impress a potential employee. Then, I was introduced to phonegap: the secret weapon to bind these two magical entities.

I was lucky enough to attend an amazing training session with the uber geeks from phonegap. I learned that I can combine mega forces and use jQuery, jQTouch, and sprinkle the magic of phonegap and BAM!!! – create a fully functioning mobile website turned native mobile application. During this time, jQuery mobile was only a wish. I remember like it was yesterday…

Brain Leroux (from phonegap) said that he ran into John Resig and teased him about coming out with “jQuery mobile”, a mobile version of jQuery. He said at the time that Resig was “working on a solution”. No jQuery mobile yet? That’s fine, the guys at phonegap rolled their own API called XUI. It’s a JavaScript micro-framework that filled the gap when it comes to mobile JavaScript development. It has very similar syntax to jQuery and is very easy to use. But it’s not jQuery – which was fine, until now…

After weeks of anticipation, the jQuery team released jQuery mobile. The morning it was released (10/16/10), I literally spent the entire day going through every page in the documentation and re-building my original resume app. Again, it took only a few hours to put together. It has a very simple templating scheme that even a blind folded panda could pick up.

Like jQTouch, jQuery mobile carries the concept of having single page applications. This means that your entire site can (and should, under the correct circumstances) be written on one HTML page. This is also beneficial if you want to use phonegap to make it a native app; it’s small in file size and easy to maintain.

In jQuery mobile, each page is represented by a div tag with some special attributes. Here’s the template for a “page” in a jQuery mobile app:

<div data-role=”page” id=”” data-theme=””>
<div data-role=”header” data-theme=””>
<h1>Page title</h1></div>
<div data-role=”content”>
<ul data-role=”listview”>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
<div data-role=”footer” data-position=”fixed”></div>

Some elements have a special attribute called data-role. When this attribute is added to a specific DOM element, it turns it into a badass mobile element that can kick your ass. Some values for the data-role attribute  include:

  • header
  • page
  • content
  • footer
  • listview
  • list-divider
  • collapsible
  • fieldcontain
  • button

I’m sure there are more, so keep your eyes peeled. Each value can only be assigned to it’s intended usage. So for example you can’t use the “button” value on a ul; it’s reserved for an href tag.

Another cool aspect that got picked from jQueryUI is… theming! There are currently 5 available themes with more in the works. Each element that turns into a mobile feature can have theme set to it. The themes can be assigned using the data-theme attribute. There are currently five available themes, each one assigned letters: a, b, c, d, e. The built in themes can make for some pretty interesting visual contrasts.

Anyone can create a nice simple app using jQuery mobile. It runs super smooth too, especially with the updates made to jQuery 1.4.3. If you don’t have time to view the documentation at your desk, the API documentation is written with JQuery mobile, which means you can see it on your mobile device! Double awesome!

I urge you to check it out ASAP. It’s the first release, so you as a developer can contribute and stay way ahead of the curve by getting into it early.