By default, the jQuery Mobile framework uses the fade transition while loading pages with Ajax. The pop transition is used by default while opening dialogs with Ajax. This recipe shows you how to set different default transitions for your app.
Copy the full code of this recipe from the code/07/default-transitions
sources folder. You can launch this code using the URL: http://localhost:8080/07/default-transitions/main.hml
.
In
main.html
, add the following script before includingjquery.mobile.js
:$(document).bind("mobileinit", function() { $.mobile.defaultDialogTransition = "flow"; $.mobile.defaultPageTransition = "turn"; });
Create the
#main
page as follows:<div id="main" data-role="page" data-theme="e"> <div data-role="header"> <h1>Configure Transitions</h1> </div> <div data-role=content> <a href="#page1" data-role="button">Open as Page</a> <a href="#page1...