Unlike other jQuery projects, such as jQuery and jQuery UI, jQuery Mobile automatically applies many markup enhancements as soon as it loads (long before the document.ready
event fires). These enhancements are applied based on jQuery Mobile's default settings, which are designed to work with common scenarios. If changes to the settings are needed, they are easy to configure.
When jQuery Mobile starts, it triggers a mobileinit
event on the document
object. To override default settings, bind to mobileinit
.
$(document).bind("mobileinit", function(){
//apply overrides here
});
Because the mobileinit
event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
You can override default settings by extending the $.mobile
object using jQuery's $.extend
method.
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
foo: bar
});
});
Alternatively, you can set them using object property notation.
$(document).bind("mobileinit", function(){
$.mobile.foo = bar;
});
To explore the effects of global configuration options, see the config test pages.
The following defaults are configurable via the $.mobile
object:
activeBtnClass
string, default: "ui-btn-active"activePageClass
string, default: "ui-page-active"ajaxEnabled
boolean, default: trueallowCrossDomainPages
boolean, default: false$.mobile.loadPage()
. This will only allow cross-domain requests if $.mobile.allowCrossDomainPages
is set to true. Because the jQuery Mobile framework tracks what page is being viewed within the browser's location hash, it is possible for a cross-site scripting (XSS) attack to occur if the XSS code in question can manipulate the hash and set it to a cross-domain URL of its choice. This is the main reason that the default setting for $.mobile.allowCrossDomainPages is set to false. In PhoneGap apps that must "phone home" by loading assets off a remote server, both the $.support.cors
AND $.mobile.allowCrossDomainPages
must be set to true.autoInitializePage
boolean, default: true$.mobile.initializePage
. If false, the page will not initialize and will be visually hidden until $.mobile.initializePage
is manually called.buttonMarkup.hoverDelay
integer, default: 200defaultDialogTransition
string, default: 'pop'defaultPageTransition
string, default: 'fade'gradeA
function that returns a boolean, default: a function returning the value of $.support.mediaqueryhashListeningEnabled
boolean, default: trueignoreContentEnabled
boolean, default: falsedata-enhance=false
parent node. If one is found the markup will be ignored. This setting and the accompanying data attribute provide a mechanism through which users can prevent enhancement over large sections of markup.linkBindingEnabled
boolean, default: trueloadingMessage
string, default: "loading"loadingMessageTextVisible
boolean, default: falseloadingMessageTheme
string, default: "a"minScrollBack
integer, default: 250ns
string, default: ""data-mynamespace-foo="..."
.
If you use data- namespacing, you will need to update/override one selector in the theme CSS. The following data selectors should incorporate the namespace you're using:
.ui-mobile [data-mynamespace-role=page], .ui-mobile [data-mynamespace-role=dialog], .ui-page { ...
pageLoadErrorMessage
string, default: "Error Loading Page"pageLoadErrorMessageTheme
string, default: "e"pushStateEnabled
boolean, default: truehistory.replaceState
in supported browsers, to convert the hash-based Ajax URL into the full document path. Note that we recommend disabling this feature if Ajax is disabled or if extensive use of external links are used.subPageUrlKey
string, default: "ui-page"touchOverflowEnabled
boolean, default: falseoverflow:
and overflow-scrolling: touch;
CSS properties. Note: Deprecated for 1.1.0.