Configuring Defaults with JavaScript

Contact Us or call 1-877-932-8228
Configuring Defaults with JavaScript

Configuring Defaults with JavaScript

We can override jQuery Moble's default values - for page transitions, for button labels, for positioning of elements, and many other aspects of our sites - via the $.mobile object, an object specific to jQuery Mobile. Setting a value for this object happens after the call to jQuery but before the call to the jQuery Mobile. We bind to the mobileinit event when doing this:

<script src=""></script>
	$(document).on('mobileinit', function() {
		$.mobile.defaultPageTransition = 'slidefade';
<script src=""></script>

The code above would set the default transition between all pages to slidefade.

Consider an example: Nan & Bob wish to support a local Spanish-language community agency's "Kids Read" event, promoting the joy of books for kids who live near the bookstore. For one week, they wish to change the display text on the back button on all pages of their site to "Atras" ("back" in Spanish). On a large site, changing the text on all buttons might be burdensome - we can instead do this once, globally, for the entire site.

config example - back button

Open Events/Demos/config.html to see the code and test it out.

Code Sample:


Code Explanation:

We set the back-button text for all pages with $.mobile.toolbar.prototype.options.backBtnText = "Atras"; - note that we place this code after the script tag linking jQuery but before the script tag linking jQuery Mobile.

You can view more details about and a list of configurable options on the jQuery Mobile website.