So jQuery Mobile finally hit 1.0 a couple weeks back, after what felt like a year of alpha and beta builds that I kept bookmarking and never actually opening. I finally sat down last night with a cup of coffee that went cold before I finished and built a tiny test page. Figured I'd write up what I learned since half the tutorials floating around still point at the old beta 3 syntax and it'll trip you up if you're not paying attention.
First thing: grab the files. You need jQuery core (they're on 1.7 now, released a couple weeks before jQuery Mobile went final), plus the jQuery Mobile JS and CSS. I just linked to the CDN versions instead of hosting them myself, because honestly for a side project that's the easy path:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.0/jquery.mobile-1.0.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.0/jquery.mobile-1.0.0.min.js"></script>
Order matters here. jQuery core first, then the mobile library. Mess that up and you'll get console errors that don't tell you anything useful, which is my least favorite kind of error.
The whole framework is built around data attributes instead of you writing a bunch of JavaScript by hand, which honestly took some getting used to. You just mark up a div with data-role="page", throw a header and content div inside with their own data-role attributes, and the library goes and turns it into something that looks like an app. No manual DOM wiring, no click handlers for basic navigation. Here's roughly what I ended up with for a dumb little "notes" page:
<div data-role="page">
<div data-role="header">
<h1>My Notes</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#">Grocery list</a></li>
<li><a href="#">Blog post ideas</a></li>
<li><a href="#">Fix the leaky faucet, seriously</a></li>
</ul>
</div>
<div data-role="footer">
<h4>techpad notes</h4>
</div>
</div>
Load that up on a phone and the listview automatically gets those rounded touch-friendly rows with the little arrow on the right. It just does it. No CSS from me at all. I tested it on my iPhone 4S over lunch and it looked basically identical to a native-ish list, which is more than I can say for most of the "mobile sites" I've had to sit through on other blogs (looking at you, sites that just shrink your desktop layout down to postage-stamp size and call it responsive).
One thing that annoyed me: transitions between pages are on by default and they're kind of slow on anything that isn't a recent phone. I tried it on an older Android device I keep around for testing and the slide transition had a noticeable stutter. You can turn it off per-link with data-transition="none" or kill it globally, and I ended up doing the global thing because honestly the flashy slide-and-fade wasn't buying me anything.
Multiple "pages" can actually live in one HTML file too, each wrapped in its own data-role="page" div with a unique id, and you link between them with a plain old href="#id". The framework intercepts that and does an AJAX-style transition instead of a real page load. Feels a little like a magic trick the first time you see it work.
I didn't get into forms yet, they've got a whole data-role vocabulary for those too (sliders, flip toggles, all styled to look native-ish) but that's probably its own post. Buttons are dead simple though, just slap data-role="button" on an anchor tag and it turns into a big fat touch target instead of a tiny link that's impossible to hit with a thumb.
Is it going to replace native app development? No, obviously not, and I don't think the jQuery team is even claiming that. But for something like a blog or a small business site where you just want it not to look broken on a phone without building three separate native apps, it's a pretty reasonable tool. Given the Carrier IQ mess that's been all over the tech sites this month, I'm honestly relieved to be building something as unglamorous and low-stakes as a notes list instead of worrying about what my phone is secretly logging.
I'll probably do a follow-up once I've actually wired this into something real instead of a throwaway test page sitting in a folder called "test3-FINAL-actually-final".