mobileinit Event
The mobileinit event is like the normal 'load' and 'ready' jQuery events.It is fired after the jQuery Mobile framework is loaded into memory and just before rendering the UI elements. You can use the event to change some of the UI global preferences.
The order of a jQuery Mobile documents event execution is normally:
mobileinit
ready
load
It needs to be located between the jQuery core include and the jQuery Mobile include because the $ jQuery object needs to be ready and we need to bind it before the jQuery Mobile framework is executed.
<script src="http://code.jquery.com/jquery-1.6.4.min.js" ></script>
<script>
<!-- CUSTOM INITIALIZATION CODE -->
$(document).bind('mobileinit', function() {
//Initialization
});
</script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" > </script>
Setting Default Values
$(document).bind("mobileinit", function() {
//----- CHANGE DEFAULT VALUES -----
//Enable for cross domain AJAX links to work
//$.mobile.allowCrossDomainPages = true;
$.mobile.defaultPageTransition = "fade"; //Default = "slide"
$.mobile.defaultDialogTransition = "pop"; //Default = "pop"
//When you open a page and then go back to it the framework scrolls the viewport to the same position where the original page was in the first tap (it remembers the position). If the first page was very near to the top (but not at pixel 0) it will stay at the top and not scroll. The default minimum value to scroll while going back is defined as 250 pixels high - change if required:
//$.mobile.minScrollBack = 150;
//When a jQuery Mobile document is loaded by default it is scrolled down from the top just enough to hide the address bar. Change this if required:
//$.mobile.defaultHomeScroll =
//----- CHANGE DEFAULT THEME CLASSES -----
//Change default classes used by the theme stylesheet
//$.mobile.activePageClass =
//$.mobile.activeBtnClass = "active-button";
//----- OVERRIDE DEFAULT STRINGS -----
//E.g. for customisation or localisation
//Global strings
//$.mobile.loadingMessage = "loading";
//$.mobile.pageLoadErrorMessage = "Error Loading Page";
//Widget strings
//$.mobile.page.prototype.options.backBtnText = "Back";
//$.mobile.dialog.prototype.options.closeBtnText = "Close";
//$.mobile.collapsible.prototype.options.expandCueText = "click to expand contents";
//$.mobile.collapsible.prototype.options.collapseCueText = "click to collapse contents";
//$.mobile.listview.prototype.options.filterPlaceholder = "Filter items...";
//$.mobile.selectmenu.prototype.options.closeText = "Close";
});
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.