Intro
All information found here can also be found in my blog ARTICLE, you will also find working examples.
- A: Initialization
A1 - Phonegap app/framework initialization with the deviceReady event.
Example:
document.addEventListener("deviceReady", yourCallbackFunction, false);
function deviceReady() {
}
More about pause even can be found here: http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html
A2 - jQuery Mobile app/framework initialization with the mobileinit event.
Example:
$(document).on("mobileinit", function () {
});
How to check if both frameworks are successfully loaded: https://stackoverflow.com/a/12821151/1848600
- B: Change page
First all events can be found here: http://jquerymobile.com/test/docs/api/events.html
Lets say we have a page A and a page B, this is a unload/load order:
1. page B - event pagebeforecreate
2. page B - event pagecreate
3. page B - event pageinit
4. page A - event pagebeforehide
5. page B - event pagebeforeshow
6. page A - event pageremove
7. page A - event pagehide
8. page B - event pageshow
- C: Minimize app
Phonegap handles this with a pause event.
Example:
document.addEventListener("pause", yourCallbackFunction, false);
More about pause even can be found here: http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html
- D: Restore app
Phonegap handles this with a resume event.
Example:
document.addEventListener("resume", yourCallbackFunction, false);
More about pause even can be found here: http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html
- Final words
There are few other phonegap and jQM events and you can find them in links mentioned above.
Something you should not use in jQM app:
$(document).ready(function(){
});
Reason:
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.
