The Basics of jQuery Mobile
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
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.
If this article was interesting, or helpful, or even wrong, please consider leaving a comment, or buying something from my wishlist. It's appreciated!