andyMatthews.net
Introduction to jQuery Mobile
In the beginning the web was dull and lifeless. Image mouseover code was tens of lines long, and wasn't cross-browser. Then came jQuery which allowed developers to write beautiful JavaScript which worked everywhere. Then the jQuery team decided to develop jQuery UI which allowed developers to build rich, compelling web applications on top of jQuery. Then in late 2010 the jQuery team announced that they were working on jQuery Mobile (jQM), another framework specifically built with mobile phones in mind, providing UI components, data structuring, page transitions, and more. Lightweight, flexible, and built on the principles of progressive enhancement, jQuery Mobile runs on every platform out there from your Dad's old Startac, to the newest Android or iPhone. I'm kicking off a series of blog posts about jQMso if you're keen to learn, then make sure you keep checking in.
See a live jQuery Mobile Project at Goba.mobi.
The Basics of jQuery Mobile
As I mentioned earlier, jQM is based on the principles of progressive enhancement. What's that in layman's terms? It means that at the heart of your project, your code is all plain vanilla HTML. Bulleted lists, paragraph tags, and yes divs, images, anchor tags, and more. Then, the better your browser is at interpreting JavaScript and CSS, the more bells and whistles that you get. This ensures that old Blackberry phones will get it, as well as the newest Motorola Atrix. Let's take a look at an uber basic jQM page.
The first thing to note is that the doctype is HTML5. Easy to remember, and allows jQMto work it's magic. Next we see the 3 files we'll need at minimum. All three are hosted on jQuery's CDN. If you choose not to use their's I strongly suggest you use Google's or Microsoft's CDN files as it helps everyone. As we scan through the code you'll notice that there's nothing else really of note except for these strange "data-" attributes sprinkled throughout. That's a new feature in HTML5 allowing developers to pass structured data around the application. Consider it a simple tag specific database and you're right on the money. jQMmakes extensive use of custom data attributes to tell the engine how it should treat various parts of the page.
A Closer Look
Closer examination of the code shows us that there are 5 unique occurences of data-role. That mirrors the hierarchy of the page and results in the screenshots seen below.
- data-role="page" - defines the current "page" being viewed by the user. When making AJAX page transitions, jQMpulls content from the DOM node "page" of the requested page and loads it into view.
- data-role="header" - defines the head area of the page. Contains back buttons (when needed), and page titles
- data-role="content" - the content portion of the page.
- data-role="listview" - tells jQM to render this unordered list as a pretty table view, ala the iPhone.
- data-role="list-divider" - tells jQM to render this specific list item as a list header.
jQuery Mobile Built-in Goodness
There's a few more things we need to point out, things that jQM does for "free". Notice that each of the normal list items has a link on it. jQM determines that if a list item has an anchor tag, it will automatically add an arrow icon >. Even nicer is that not only can you swap between a dozen or so built-in icons, but you can also design your own, and inject them into the framework with custom CSS.
To use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and apply it to the button. You can then write a CSS rule that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.
You should also note that when a table view (data-role="listview") has a data-inset attribute of true, jQM will round the corners of the first and last element. No intercession on your part is necessary. Add an element and jQM automatically calculates the first, and last, item in the list and rounds the appropriate corners. One final thing to point out in this basic view is page transitions. When linking between documents in the same domain, jQM will use beautiful transitions when moving back and forth.
The last thing I'd like to point out is jQM's ability to theme. Notice the data-theme="e" attribute on the last list item. It's now a member of the "e" theme which is a yellow tint. All of it's children would follow the yellow theme while it's siblings remain silver. Theming in jQM is simple if you remember the following color sets. It's also simple to add your own theme. I'll be writing a future blog post on doing just that.
- The "a" theme is predominantly black
- The "b" theme is predominantly blue
- The "c" theme is predominantly grey/silver
- The "d" theme is predominantly white
- The "e" theme is predominantly yellow
If you're going to be attending cf.Objective() this May 12-14 in Minneapolis make sure to attend my session Using jQuery Mobile for your Next Web Application.
You can also download code samples and a slide deck from my talk "Using jQuery Mobile for your Next Web Application" that I gave at cfObjective in May, 2011.