jQuery Mobile: Up and Running

Preparing the Package

We have to keep in mind some important things when we are creating native-like apps with jQuery Mobile. First, there will be no browser toolbars. That means, for example, no back button from the UI. Our webapp should have back buttons explicitly on the header as we’ve already seen before in this book.

Warning

When compiling a native app, never use CDN as the way to load jQuery Mobile files.

The second problem will be with loading external pages. When creating an app, we can load local pages that are HTML files that will be distributed with the app itself.

If we want to load jQuery Mobile documents from a remote URL, we can define $.support.cors=true on the mobileinit event handler. This will allow the framework access via AJAX remote servers. We should also declare $.mobile.allowCrossDomainPages=true.

jQuery Mobile also recommends that you disable pushState to avoid problems with URL management.

Therefore, our main HTML file should have:

$(document).bind("mobileinit", function() {
    $.support.cors = true;
    $.mobile.allowCrossDomainPages = true;
    $.mobile.pushState = false;
});

If we are targeting iOS 5.0+, we can also enable the real fixed toolbars functionality for better performance and usability on fixed headers and footers.

Tip

When packaging native apps, we should prepare some other files, such as an icon for the home or app menu and a launch image that will be shown while our webapp is loaded. Some platforms also need an explicit list of servers to access the network. ...