How to enable animated page transitions with Phonegap + JQuery Mobile?

2
votes

Per the JQuery Mobile documentation ...

To enable animated page transitions, all links that point to an external page (ex. products.html) will be loaded via Ajax

How, if it is even possible, can one enable page transitions when building a Phonegap application where all the pages are local rather than sitting on a web server?

1
jquery-mobilecordova

1 Answers

0
votes

There isn't a difference if AJAX is loading from local file or web (except if web you need to whitelist the domains).

By default Phonegap/Cordova for iOS loads from www/index.html.

Here is an example with 2 pages, with in-line data attributes for the transitions.

First page, page1.html

<!-- page1.html -->
...
<div id="page1" data-role="page">
    Local on same page<br/>
    <a href="#samePage" data-transition="pop">same page</a>

    Local in another page<br/>
    <a href="page2.html" data-transition="fade">new page</a>

</div>

<div id="samePage" data-role="page">
    Same Page
</div>
...

A separate file page2.html.

<!-- page2.html -->
<div id="page2" data-role="page">
    Page 2
</div>