Linking between jQuery Mobile pages creates a transition animation between pages on compatible devices (e.g. iOS & Android). If running on a browserthe browser’s back button (which may be a hardware back button on some devices such as android) will go back to the first page.
Back Button In Header
Use this in the page data-role:
<div data-role="page" data-add-back-btn="true" data-back-btn-text="Previous" data-back-btn-theme="e" > </div>
Address Bar Appearing When Navigating
When the user navigates to another page the address bar may appear for a second and then hide again. This only happens with browser based webapps and can be avoided by using a full-screen webapp or a hybrid native app.
Linking To Another Page In The Same Document
Linking To Another Page File On The Same Domain
Use a normal href link to the html or php file. jQuery Mobile will actually use AJAX to make the request to the other document and show a spinner while it gets it.
The destination page must be a 1 page document.
Non jQuery Links (Absolute External Links)
To link to another site or document that does not have jQuery Mobile content add data-rel="external" to the a tag. E.g.:
<a href="http://www.somedomain.com" data-rel="external">
target="_blank" > will also do the same thing.
Transitions Between Pages
By default all the transitions between pages use the right-to-left animation. To change or to explicitly define which animation transition we want in every page change use data-transition inside the link.
slide – The default right-to-left animation
slideup – Bottom-to-top animation (mostly used for modal pages)
slidedown – Top-to-bottom animation
pop – The new page grows from a small point in the middle to a full-screen page
fade – A cross-fade animation between old and new pages
flip – A 2D or 3D rotation animation (3D is available only on some devices such as iOS devices. On other devices such as Android this transition renders a 2D less cool rotation).
<a href="#page2" data-transition="fade">Next page</a>
If you want to force a reverse transition (back action) you can specify data-direction="reverse" on the link to cause jQuery Mobile to make the transition in reverse.