Multiple Pages with Transitions
Hi,
I've looked over the documentation and searched this forum (as well as others like StackOverflow), but still haven't been able to figure this out.
I'm a noob so I'm guessing I'm missing something fairly trivial...
Here's what I know:
in jQuery Mobile you can have multiple pages by either:
a. in one html file, have multiple page divs
b. have multiple html files
Using one html file with multiple page divs, I was able to get page transitions working by merely adding [data-transition="slide"] as an attribute to the link. (That's so awesome by the way.)
I then wanted to break the pages out into multiple html files so it'll be easier to maintain. The pages link just fine, but the transitions are no longer there.
Should [data-transition="slide"] be all I need to get page transitions working between multiple html files as well?
If not, then what else do I need to add?
I've tried adding [rel="external"] and replacing the href with "./page2.html" and "page2.html#foo".
Here's some more background information:
1. all the html files are in the same directory
2. I'm using PhoneGap as well
3. right now it's just one page div in each html file
From what I've read I'm not sure if jQuery Mobile automatically fetches the next page with AJAX, loads it into the DOM, and then transitions to the next page (hopefully with some animated transition). Or if I'm suppose to handle the fetching, loading, and transitioning thru javascript myself.
This example site looks like it's using multiple html pages and it has transitions:
https://mobile.united.com/Booking?GUID=ec20637e-fba7-4316-803a-41f6c938f693/
so it seems like it should be possible. Of course I'm not sure if inspecting the URL and the page source is any indication of them actually using multiple html files or not.
I've only used basic sample code from the jQuery website, but I can post them if it'll help. It seems like I'm just missing some high level work flow understanding of how jQuery Mobile is expecting me to tell it how to transition to the next html file.
Thank you for your time.