Getting Started with jQuery Mobile

web

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 data-role="listview".

I like that there is built in markup for creating the controlls, and I wish jQueryUI had some of that. For example if you want to create a button in jQueryUI you need to add some javascript $('.button').button();

With jQuery Mobile you could actually build a fully mobile app without writing any JavaScript if you wanted. So you don't really need to know jQuery to start using jQuery Mobile.

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:

$('ul').listview("refresh");

You will also run into the same type of thing with the form controls, such as the select list control, and the checkbox control if you populate their values from javascript.

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.



Related Entries

This entry was:

Trackbacks

Trackback Address: 766/B172E577FD9E26E6D293BE463A4D11D5

Comments

On 10/29/2010 at 7:38:33 PM EDT Aaron Longnion wrote:
1
Nice Pete! I'm using jQuery Mobile for http://Refynr.com to good effect. I've not used any custom jQuery code, yet, and am already happy with the results.

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!

On 10/29/2010 at 11:17:26 PM EDT Brian Swartzfager wrote:
2
I spent today trying out jQuery Mobile as well. While I do like what they've done with it so far, there's definitely some room for improvement. And I kind of wish they would provide some more raw code examples: doing View Source on the demo pages doesn't really give you the current code.

On 10/30/2010 at 6:29:52 PM EDT Pete Freitag wrote:
3
@Aaron, yes I saw your implementation on refynr.com, very nice!

@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) :)

On 11/04/2010 at 3:39:37 AM EDT John B wrote:
4
I'm running into the same listview+AJAX = no styling problem.

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?

On 11/04/2010 at 1:14:42 PM EDT Pete Freitag wrote:
5
@John B - I went over to https://github.com/jquery/jquery-mobile and downloaded the latest. Be warned though that is not necessarily going to be a stable build, since it is just the latest from their version control.

On 11/04/2010 at 1:20:10 PM EDT Pete Freitag wrote:
6
@John I should also mention that you will need to run their Makefile to compile all the source into a single distribution file. If you are on a mac you can just run type make zip from the Terminal.

On 11/04/2010 at 4:17:12 PM EDT John B wrote:
7
OK. I'm a bit of a newbie in the PHP world. Is this correct:

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?

Any advice?

On 11/04/2010 at 4:39:31 PM EDT Pete Freitag wrote:
8
@John - Yes your steps are correct.

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.

On 11/04/2010 at 5:56:58 PM EDT John B wrote:
9
That worked! Thanks a lot Pete.

On 12/13/2010 at 11:33:46 PM EST John wrote:
10
Is there an equivalent to the refresh call that can be made on listviews to fix the same problem with forms?

On 12/15/2010 at 2:36:27 PM EST Pete Freitag wrote:
11
@John, there is a refresh method for the selectmenu widget, which can be invoked as $('select').selectmenu('refresh', true); the second argument (true in this example) determines if the list should be rebuilt from scratch.

Were you looking for a refresh on another form control?

On 08/31/2011 at 7:45:08 AM EDT Suhani wrote:
12
Hi, really jQuery mobile rocks! can you please post your slides providing info about PhoneGap too?

Post a Comment




  



Spell Checker by Foundeo

Recent Entries



foundeo


did you hack my cf?