Getting Started with jQuery Mobile
Yesterday I had a chance to get my feet wet with the Alpha 1 release of jQuery Mobile for one of my clients. Prior to yesterday I had been working with jqTouch for mobile UI.
Overall I really like the way it's built, you can simply use the
data-role attribute to turn markup into mobile widgets. For example want to turn a link into a button, just use:
<a href="#section" data-role="button">Do Stuff</a>
Want to turn a
ul into a list control, use
Easy to Learn
jQuery Mobile is very easy to learn, and because of that I think it is going to be a very successful project. I was able to rewrite a jqTouch app into jQuery Mobile in a couple hours, using a majority of the features.
Still an Alpha
I did find a few issues in the Alpha release that I had to work around, they all center around not being able to dynamically change the markup. For example I was populating my
listview from an AJAX request, and it was not being styled properly. They have provided a way to refresh styling in the latest version of jQuery Mobile from github, you can now simply call:
So which is better jQuery Mobile or jqTouch?
Right now jqTouch is a bit more stable, but I much prefer working with jQuery mobile, and I'm confident they will iron out all the issues. I was actually able to work around all issues I had, and for an Alpha release it's actually pretty well done!
More on jQuery Mobile
Look for some more blog entries on jQuery Mobile in the coming weeks. I am going to be giving a presentation on using it with PhoneGap at my local ColdFusion User Group meeting in December, so I'll be sure to post my slides here.
- Building iPhone Android Apps with jQuery Mobile and PhoneGap Slides - January 12, 2011
- HTML5 Input Type Keyboards on iPhone & Android Devices - November 15, 2010
- jQuery UI Autocomple IE 6 Select List z-Index Issues - August 16, 2010
- Using jQuery UI Autocomplete with Hidden ID's - July 14, 2010
- jQuery UI Sortable Tutorial - January 7, 2010
I just wish it looked better in IE (only tested on IE 8 so far), but I'm liking how it looks and behaves in Android, FF, Safari, and Chrome!
@Brian - I had to do quite a bit of view source as well. You can just delete the hash from the address bar and then load the page to view source (since it loads the pages using ajax calls) :)
I'm just loading the CDN version from their site (http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js).
How did you get a later version?
1. On their github page, I would click the "Download" button on the top right.
2. Unzip the files to a directory
3. Then "run their Makefile" to create the single CSS and JS files.
4. Include the new files on my site instead of their 1.0a1 version.
It's step #3 that's a little confusing. I have both a Mac and a PC, but all my dev experience is in the PC world. How would I make that happen?
For step 3 on your Mac, open the Terminal.app and then use cd to navigate to the directory you extracted the files to in step 2. Once you are in that directory type "make zip" into terminal (without the quotes) and hit return. That should build new js and css files from the downloaded source.
Were you looking for a refresh on another form control?
can you please post your slides providing info about PhoneGap too?
- Upcoming CFML Conferences in April 2017
- CFSummit 2016 Slides
- Securing Legacy CFML - dev.Objective() 2016 Slides
- My CFSummit 2015 Slide Decks
- Adding Chrome Custom Search for CFDocs
- Disable Flash Remoting on ColdFusion Servers
- HackMyCF Adds SSL/TLS Scanner
- IncompatibleClassChangeError after ColdFusion 11 Update 5