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


<a href="#id_of_the_page">

 

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.

The framework takes only the first page (the first div with role="page") from the loaded document and discards any other content. So any information you add to the <head> of the target document will be ignored, with any other content outside the first page element. That means any CSS or JavaScript embedded in other documents and the title element will be ignored. If you want to support non jQuery browser this content shouldn't be removed as it will be used by them following the link as a normal web link, but as far as jQuery is concerned it doesn't exist.

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.

 

 

UK Electronic Designer
USEFUL?
We benefit hugely from resources on the web so we decided we should try and give back some of our knowledge and resources to the community by opening up many of our company’s internal notes and libraries through mini sites like this. We hope you find the site helpful.
Please feel free to comment if you can add help to this page or point out issues and solutions you have found, but please note that we do not provide support on this site. If you need help with a problem please use one of the many online forums.

Comments

Your email address will not be published.