{"id":6,"date":"2023-08-25T17:34:36","date_gmt":"2023-08-25T17:34:36","guid":{"rendered":"\/\/api.jquerymobile.com\/1.4\/?page_id=6"},"modified":"2023-08-25T17:34:36","modified_gmt":"2023-08-25T17:34:36","slug":"global-config","status":"publish","type":"page","link":"https:\/\/api.jquerymobile.com\/1.4\/global-config\/","title":{"rendered":"Configuring Defaults"},"content":{"rendered":"

Working with jQuery Mobile's Auto-initialization<\/h2>\n\t\t\t

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<\/code> 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.<\/p>\n\n\t\t\t

The mobileinit event<\/h3>\n\t\t\t

When jQuery Mobile starts, it triggers a mobileinit<\/code> event on the document<\/code> object. To override default settings, bind to mobileinit<\/code>.<\/p>\n\n\t\t\t

\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
$( document<\/span> ).on( "mobileinit"<\/span>, function<\/span>(<\/span>) <\/span>{<\/code><\/div><\/div>
  \/\/apply overrides here<\/span><\/code><\/div><\/div>
});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t\t
Because the mobileinit<\/code> 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:<\/p>\n\n\t\t\t
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
<script<\/span> src<\/span>="jquery.js"<\/span>><\/span><\/script<\/span>><\/span><\/code><\/div><\/div>
<script<\/span> src<\/span>="custom-scripting.js"<\/span>><\/span><\/script<\/span>><\/span><\/code><\/div><\/div>
<script<\/span> src<\/span>="jquery-mobile.js"<\/span>><\/span><\/script<\/span>><\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t\t
You can override default settings by extending the $.mobile<\/code> object using jQuery's $.extend<\/code> method.<\/p>\n\n\t\t\t
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
$( document<\/span> ).on( "mobileinit"<\/span>, function<\/span>(<\/span>) <\/span>{<\/code><\/div><\/div>
  $.extend( $.mobile , {<\/code><\/div><\/div>
    foo<\/span>: bar<\/code><\/div><\/div>
  });<\/code><\/div><\/div>
});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t\t
Alternatively, you can set them using object property notation.<\/p>\n\t\t\t
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
$( document<\/span> ).on( "mobileinit"<\/span>, function<\/span>(<\/span>) <\/span>{<\/code><\/div><\/div>
  $.mobile.foo = bar;<\/code><\/div><\/div>
});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t\n\n\t\t
Configurable options<\/h2>\n\t\t
The following defaults are configurable via the $.mobile<\/code> object:<\/p>\n\n
\n\t
activeBtnClass<\/code> string<\/em>, default: "ui-btn-active"<\/dt>\n\t
The CSS class used for "active" button state.
Deprecated<\/strong> in 1.4 and will be removed in 1.5. The class "ui-btn-active" will continue to be applied to elements as before.<\/div><\/dd>\n\t
\n\t
activePageClass<\/code> string<\/em>, default: "ui-page-active"<\/dt>\n\t
The CSS class used for the page currently in view or in a transition.
Deprecated<\/strong> in 1.4 and will be removed in 1.5. The class "ui-page-active" will continue to be applied to elements as before.<\/div><\/dd>\n\t
\n\t
ajaxEnabled<\/code> boolean<\/em>, default: true<\/dt>\n\t
jQuery Mobile will automatically handle link clicks and form submissions through Ajax, when possible. If false, URL hash listening will be disabled as well, and URLs will load as ordinary HTTP requests.<\/dd>\n\t
\n\t
allowCrossDomainPages<\/code> boolean<\/em>, default: false<\/dt>\n\t
When jQuery Mobile attempts to load an external page, the request runs through $.mobile.loadPage()<\/code>. This will only allow cross-domain requests if $.mobile.allowCrossDomainPages<\/code> 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<\/code> AND $.mobile.allowCrossDomainPages<\/code> must be set to true.<\/dd>\n\t
\n\t
autoInitializePage<\/code> boolean<\/em>, default: true<\/dt>\n\t
When the DOM is ready, the framework should automatically call $.mobile.initializePage<\/code>. If false, the page will not initialize and will be visually hidden until $.mobile.initializePage<\/code> is manually called.<\/dd>\n\t
\n\t
buttonMarkup.hoverDelay<\/code> integer<\/em>, default: 200<\/dt>\n\t
Set the delay for touch devices to add the hover and down classes on touch interactions for buttons throughout the framework. Reducing the delay here results in a more responsive feeling ui, but will often result in the downstate being applied during page scrolling.\n\t
Deprecated<\/strong> in 1.4 - use $.mobile.hoverDelay<\/code> instead.<\/div><\/dd>\n\t
\n\t
defaultDialogTransition<\/code> string<\/em>, default: 'pop'<\/dt>\n\t
Set the default transition for dialog changes that use Ajax. Set to 'none' for no transitions.\n\t
Deprecated<\/strong> in 1.4.<\/div>\n\t\t
When using pages styled as dialogs (data-role="page" data-dialog="true"<\/code>), if you wish for them to have a different transition than regular pages, you must specify the transition on the link that opens them by adding the attribute data-transition="pop"<\/code> to the link. "pop" is just an example. You may specify any transition you wish, such as "slide", "flip", or "none".<\/p>\n\t\t
Similarly, when calling the pagecontainer<\/a>'s change()<\/code> method, you must also specify the transition explicitly, if you wish it to be different from the $.mobile.defaultPageTransition<\/code>:\n\t\t
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
$( ":mobile-pagecontainer"<\/span> )<\/code><\/div><\/div>
  .pagecontainer( "change"<\/span>, "dialog.html"<\/span>, { transition<\/span>: "pop"<\/span> } );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\t\t<\/p>\n\t<\/dd>\n$.mobile.defaultDialogTransition is deprecated.\n\t
\n\t
defaultPageTransition<\/code> string<\/em>, default: 'fade'<\/dt>\n\t
Set the default transition for page changes that use Ajax. Note: default changed from 'slide' to 'fade' in 1.1. Set to 'none' for no transitions.<\/dd>\n\t
\n\t
degradeInputs<\/code> object<\/em><\/dt>\n\t
This setting influences the default behaviour of the function $.mobile.degradeInputsWithin()<\/a>. It specifies how inputs are to be degraded. Each property is the name of an input type, and the property's value is either false<\/code>, meaning to leave inputs of the given type untouched, or a string giving an alternative input type into which elements of the given input type should be converted. By default, only input<\/code> elements of type "range"<\/code> and of type "search"<\/code> are degraded:\n \t\t
\n\t\t\t
"color"<\/code>, default: false<\/code><\/dt>\n\t\t\t
The input type to which to convert input<\/code> elements of type "color"<\/code>.<\/dd>\n\t\t\t
"date"<\/code>, default: false<\/code><\/dt>\n\t\t\t
The input type to which to convert input<\/code> elements of type "date"<\/code>.<\/dd>\n\t\t\t
"datetime"<\/code>, default: false<\/code><\/dt>\n\t\t\t
The input type to which to convert input<\/code> elements of type "datetime"<\/code>.<\/dd>\n\t\t\t
"datetime-local"<\/code>, default: false<\/code><\/dt>\n\t\t\t
The input type to which to convert input<\/code> elements of type "datetime-local"<\/code>.<\/dd>\n\t\t\t
"email"<\/code>, default: false<\/code><\/dt>\n\t\t\t
The input type to which to convert input<\/code> elements of type "email"<\/code>.<\/dd>\n\t\t\t
"month"<\/code>, default: false<\/code><\/dt>\n\t\t\t
The input type to which to convert input<\/code> elements of type "month"<\/code>.<\/dd>\n\t\t\t
"number"<\/code>, default: false<\/code><\/dt>\n\t\t\t
The input type to which to convert input<\/code> elements of type "number"<\/code>.<\/dd>\n\t\t\t
"range"<\/code>, default: "number"<\/code><\/dt>\n\t\t\t
The input type to which to convert input<\/code> elements of type "range"<\/code>.<\/dd>\n\t\t\t
"search"<\/code>, default: "text"<\/code><\/dt>\n\t\t\t
The input type to which to convert input<\/code> elements of type "search"<\/code>.<\/dd>\n\t\t\t
"tel"<\/code>, default: false<\/code><\/dt>\n\t\t\t
The input type to which to convert input<\/code> elements of type "tel"<\/code>.<\/dd>\n\t\t\t
"time"<\/code>, default: false<\/code><\/dt>\n\t\t\t
The input type to which to convert input<\/code> elements of type "time"<\/code>.<\/dd>\n\t\t\t
"url"<\/code>, default: false<\/code><\/dt>\n\t\t\t
The input type to which to convert input<\/code> elements of type "url"<\/code>.<\/dd>\n\t\t\t
"week"<\/code>, default: false<\/code><\/dt>\n\t\t\t
The input type to which to convert input<\/code> elements of type "week"<\/code>.<\/dd>\n\t\t<\/dl>\n\t<\/dd>\n\t
\n\t
dynamicBaseEnabled<\/code> boolean<\/em>, default: true<\/dt>\n\t
When this property is set to false<\/code> the base tag value in browsers that support a dynamic base tag and URL prefixes in browsers that don't won't<\/em> be updated to reflect where the page was loaded from. This means that resource references that are relative to the page on which they are defined may break. This option is available for web frameworks that operate under a universal base tag value where all links and assets are relative to a single base.<\/dd>\n\t
\n\t
focusClass<\/code> string<\/em>, default: "ui-focus"<\/dt>\n\t
The CSS class used for "active" button state.
Deprecated<\/strong> in 1.4 and will be removed in 1.5. The class "ui-focus" will continue to be applied to elements as before.<\/div><\/dd>\n\t
\n\t
getMaxScrollForTransition<\/code> function<\/em><\/dt>\n\t
Set a scroll position breakpoint for transitions. If the scroll position is greater than the value returned by this function, transition "none" will be used. The default function returns three times the height of the window.<\/dd>\n    
\n\t
gradeA<\/code> function that returns a boolean<\/em>, default: a function returning the value of $.support.mediaquery<\/dt>\n\t
Any support conditions that must be met in order to proceed.<\/dd>\n\t
\n\t
hashListeningEnabled<\/code> boolean<\/em>, default: true<\/dt>\n\t
jQuery Mobile will automatically listen and handle changes to the location.hash. Disabling this will prevent jQuery Mobile from handling hash changes, which allows you to handle them yourself or use simple deep-links within a document that scroll to a particular id.<\/dd>\n\t
\n\t
ignoreContentEnabled<\/code> boolean<\/em>, default: false<\/dt>\n\t
Warning:<\/em> Setting this property to true will cause performance degradation on enhancement. Once set, all automatic enhancements made by the framework to each enhanceable element of the user's markup will first check for a data-enhance=false<\/code> 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.<\/dd>\n\t
\n\t
keepNative<\/code> Selector<\/em>, default: ":jqmData(role='none'), :jqmData(role='nojs')"<\/dt>\n\t
Elements matching the selector specified in this option will never be enhanced. This is different from ignoreContentEnabled<\/a> because it does not affect the children of elements that match this selector.<\/dd>\n\t
\n\t
linkBindingEnabled<\/code> boolean<\/em>, default: true<\/dt>\n\t
jQuery Mobile will automatically bind the clicks on anchor tags in your document. Setting this option to false will prevent all anchor click handling including<\/em> the addition of active button state and alternate link bluring. This should only be used when attempting to delegate the click management to another library or custom code.<\/dd>\n\t
\n\t
maxTransitionWidth<\/code> integer, boolean<\/em>, default: false<\/dt>\n\t
Set a max width for transitions. The option accepts any number representing a pixel width and its default value false<\/code>. If a number value is set, transition "none" will be used if the window is wider than the specified value.<\/dd>\n    
\n\t
minScrollBack<\/code> integer<\/em>, default: 0<\/dt>\n\t
Minimum scroll distance that will be remembered when returning to a page.
Deprecated<\/strong> in 1.4 and will be removed in 1.5. Any and all scrolling will be remembered. This matches native behavior. The old default value of 250 has changed to 0 during the deprecation period.<\/div><\/dd>\n\t
\n\t
ns<\/code> string<\/em>, default: ""<\/dt>\n\t
The namespace used in data attributes (e.g., data-role). Can be set to any string, including a blank string which is the default. When using, it's clearest if you include a trailing dash, such as "mynamespace-" which maps to data-mynamespace-foo="..."<\/code>.\n\t\t
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:\n\t\t
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
.ui-mobile [data-mynamespace-role=page], .ui-mobile [data-mynamespace-role=dialog], .ui-page { ...<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\t\t<\/p>\n\t<\/dd>\n\t
\n\t
pageLoadErrorMessage<\/code> string<\/em>, default: "Error Loading Page"<\/dt>\n\t
Set the text that appears when a page fails to load through Ajax.<\/dd>\n\t
\n\t
pageLoadErrorMessageTheme<\/code> string<\/em>, default: "e"<\/dt>\n\t
Set the theme that the error message box uses.<\/dd>\n\t
\n\t
phonegapNavigationEnabled<\/code> boolean<\/em>, default: false<\/dt>\n\t
Replace calls to window.history.back<\/code> with PhoneGap's navigation helper where it is available. This addresses navigation issues on page refresh in Android PhoneGap applications using jQuery Mobile.<\/dd>\n\t
\n\t
pushStateEnabled<\/code> boolean<\/em>, default: true<\/dt>\n\t
Enhancement to use history.replaceState<\/code> 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 external links are used extensively.<\/dd>\n\t
\n\t
subPageUrlKey<\/code> string<\/em>, default: "ui-page"<\/dt>\n\t
The url parameter used for referencing widget-generated sub-pages (such as those generated by nested listviews). Translates to example.html&ui-page=<\/strong>subpageIdentifier<\/em>. The hash segment before &ui-page= is used by the framework for making an Ajax request to the URL where the sub-page exists.
Deprecated<\/strong> in 1.4 and will be removed in 1.5. <\/div><\/dd>\n\t
\n\t
transitionFallbacks.[transition]<\/code> string<\/em>, default: "fade"<\/dt>\n\t
Set the fallback transition for browsers that don't support 3D transforms for a specific transition type.<\/dd>\n\n<\/dl>","protected":false},"excerpt":{"rendered":"
A list of the configurable options.<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-6","page","type-page","status-publish","hentry","category-reference"],"_links":{"self":[{"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":1,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":7,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/pages\/6\/revisions\/7"}],"wp:attachment":[{"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/media?parent=6"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/categories?post=6"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/tags?post=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}