Change default page transition with jQuery mobile

jQuery mobile used to have the default page transition set to ‘slide’. But that has changed and the current version of jQuery mobile has the default page transition set to ‘fade’. While it is possible to specify a page transition (via hyperlink, for example) to ‘slide’ using the following html code:

<a href=”#page2″ data-transition=”slide”>

The is quite cumbersome if you want to have all the pages with the same transitions. So the best way to set all page transitions to be the same is to set it in the script tag at the header section of the page and set it before the jQuery mobile script is loaded. For example:

<link href=”jquery-mobile/jquery.mobile.theme-1.3.0.min.css” rel=”stylesheet” type=”text/css”/>
<link href=”jquery-mobile/jquery.mobile.structure-1.3.0.min.css” rel=”stylesheet” type=”text/css”/>
<script src=”jquery-mobile/jquery-1.8.3.min.js” type=”text/javascript”></script>
<script>
$(document).on(“mobileinit”, function(){
$.mobile.defaultPageTransition = ‘slide’;
$.mobile.page.prototype.options.addBackBtn = true;
});
</script>
<script src=”jquery-mobile/jquery.mobile-1.3.0.min.js” type=”text/javascript”></script>

The above code will also add a Back Button to every page.

Advertisements

~ by brianchau on September 9, 2013.

2 Responses to “Change default page transition with jQuery mobile”

  1. Super! thanks

  2. […] Change Default Page Transition With JQuery Mobile September 8th, 2013 — “jQuery mobile used to have the default page transition set to ‘slide’. But that has changed and the current version of jQuery mobile has the default page transition set to ‘fade’. While it is possible to specify a page transition (via hyperlink, for example) to ‘slide’ using the following html code: The […]” 1 Comment […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: