jQuery mobile is already pretty good and usable. One has to deal with a lack of documentation (examples are there - but no reference). So it took me to do some testing to understand completely how i could use the events generated by page transition.
But if you come across: "Note that all four of these events expose a reference to either the next page (nextPage) or previous page (prevPage), depending on whether the page is being shown or hidden" you might think like me. I don't like the "the one or either reference is filled" things in my coding life. "Sometimes it works, sometimes not". "I might read that book or the other".
I wrote some code in my mobilinit function:
Please note my selector:
If you use:
as selector all divs in your app will be treated as page. Not very good for your app, believe me.
The output of my script is:
You can see * pagebeforehide and pagehide do always contain a nextPage. * pagebeforeshow and pageshow do always contain a previousPage.
I would have expected that at least pagebeforeshow would have a reference to the nextPage as it is not show (so there actually is a next page to show). pageshow does not have a nextPage because there is only a "current page".
You need to be careful. My iPhone 4.0 emulation stops working when you do the following:
pagebeforeshow does not have that nextPage as already mentioned an so calling attr on an undefined object has frozen my app.
If you would like to do something on a specific next page (before it is shown), you could do something like that: