Here are some quick starter tips for creating a jQuery Mobile app.  Thanks goes out to all those that went through this before me.

Of course, for starters – http://jquerymobile.com/   – At the time of this article, Beta 3 had just been released and RC1 is on the way.  Be sure to match up the version of jquerymobile to the documentation on the site.  There are pretty big changes from Alpha to Beta and I assume a few more adjustments along the way.

Initial html structure for 1 page per file using the default AJAX page loading method:
<!DOCTYPE html>
<html>
<head>
 <title>Page Title</title>
 <link rel="stylesheet" href="css/jquery.mobile-1.0b3.css" />
 <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
 <script scr="my-app.js"></script>
 <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
</head>
<body>
 
<div data-role="page" data-theme="c" id="page1">
 
<div data-role="header" data-theme="c">
</div><!-- /header -->
 
<div data-role="content" data-theme="c">
 
</div><!-- /content -->
 
<div data-role="footer" data-theme="c">
</div><!-- /header -->
 
</div><!-- /page -->
 
</body>
</html>

This is for one page per file.  You can add multiple pages by adding additional page blocks but I believe that can cause loading problems when there are large numbers of page in one file.  Basically loading all the pages into the dom at once may be unnecessary.

Where to place your javascript:

All of your Javascript belongs in its own file. I tried inline scripts on some pages but when you navigate back and forward, functions were getting duplicated in the dom and each additional page visit was running the same function again.  Instead – to trigger javascript to run when a page is loaded – use  the pagecreate and/or pageshow events.

$('#page1').live('pagecreate',function(event){  myfunction();  }
$('#page1').live('pageshow',function(event){  myfunction(); }

Use pagecreate is used instead of $(document).ready(){}

Viewport, scaling and zooming:

Notice the viewport meta tag – this is pretty critical to get the page to size appropriately regardless of the device.  It also prevents zooming.

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
Data-Themes:

data-theme is your friend.  Leverage the jquery mobile buttons, and form elements as much as possible. To edit their look and feel, duplicate a whole css them block and rename the main class.   By default, there are a,b,c,d,e theme styles.  I took theme c and called it “t” .  Be aware – I ran into some issues with select dropdowns.  they basically didn’t care which theme I told it to use, and when it rendered out, in the code it still referenced theme c.  Not sure why – I think its a bug.

When adding buttons or other JQM styled elements dynamically, you need to trigger the create or refresh to get it render correctly.  Ex:  when added a list of links that you want to look like buttons – after adding the links via javascript, you then have to call  .trigger(‘create’);

$.each(data, function(i, val){
  linkList += '<a href="link-detail.php" data-icon="arrow-r" data-role="button" data-iconpos="right" data-theme="t" data-category="'+val.category+'" onclick="globalPart = '+i+'">'+val.name+'</a>';
});
$('#list-container').append(linkList).trigger('create');

If you manipulate an styled element, trigger(‘refresh’) instead.

Data passing:

Passing data from one page to another will cause you the most head aches.  The word on the google streets is this is a fundamental problem across the board.   The two methods that I used (right or wrong)  were form submit and global variables.   Since the pages are loaded via AJAX, the global variables persist.  The issue with this method is if you load a page that requires one of those global variables directly – your page won’t work.  Example – You are on a page that lists products. Each product has an ID that is used to get that products detail info.  You click product 44 (set the globalVar to 44).  the product-detail page loads, you use globalVar 44 to get all the detail info.   The user leaves or does something on their phone and the page refreshes – clearing out the globalVar and resulting in an empty page.  In this case, I just redirect the user back to the product list page using   mobile.changePage

$.mobile.changePage( "product-list.php", { reloadPage: true} );

The other trick I learned was around Images.  I set all my images to 100% width.  This causes them to stretch proportionality depending on landscape or portrait but also meant that my images needed to be the same width even if they were transparent.  Im sure there is a better answer for this – but it worked well in my case.

To leverage Geolocation and Google Maps:

http://code.google.com/apis/maps/documentation/staticmaps/index.html#Latlons

var gps = navigator.geolocation;
        if (gps){
            gps.getCurrentPosition(getLatLongSensor,
                   function(error){
                alert("Got an error, code: " + error.code + " message: " + error.message);
             });
        }
        function getLatLongSensor(position){
            latLong = position.coords.latitude +","+position.coords.longitude;
            //Use Lat and Long and build page
        }

There is also this plugin for full Google Maps interaction for Web and Mobile  – http://code.google.com/p/jquery-ui-map/

Default phone functions – Address and Phone:

When adding Addresses or Phone numbers use the HTML5 tags to have the phones use their default functions like MAPS to map an address or to bring up the Phone with phone number already entered.

<address>
123 main st
anywhere, ST 12345
</address>
 
<a href="tel:123-123-1234">123-123-1234</a>
Testing:

https://www.deviceanywhere.com

Those are my basic tricks and tips to get started with jQuery Mobile.