jQuery Mobile: Up and Running

Navigation

For navigation between pages, we will use standard a elements. jQuery Mobile will take them and do the magic for us.

First of all, there are different types of hyperlinks that we can make:

• Internal links to another page in the same document (known as a multipage document)

• External links to a page in other jQuery Mobile documents

• Absolute links to non-jQuery Mobile documents

• Mobile special links

Linking between jQuery Mobile’s pages (first two cases) creates two special linking behaviors:

• It creates a transition animation between pages, on compatible devices (such as iOS- and Android-based devices).

• If running on a browser (and not in chromeless installed app), the browser’s back button will automatically go back to the first page.

A great feature of jQuery Mobile is the detection of the browser’s back button to deliver a backward navigation option using techniques transparent to us. Some devices, such as Android- and BlackBerry-based ones, have hardware back buttons that will also work for going back to the previous page.

Tip

In multipage documents, the first page in the DOM will be shown with the first load.

The navigation from the second page to the first one after a back event is fired is done using the same transition effect in reverse.

This back pattern is inspired by iOS and other mobile OS’s user interfaces’ patterns. jQuery Mobile will stack every new page the user accesses so she can go back anytime to any previously viewed page.

This navigation is entirely done ...