One of the first thing that comes into mind of new phonegap developers is how to create multiple pages. Basically there are two ways to create it:
- Using anchor link: We can have multiple HTML files in our www directory and link them using anchor tags. This is the same way pages in website are linked. It takes time for the webview to load and render a new document therefore it will have a bad user experience and your phonegap app will behave like a 100% web app.
- Using div tags: We can have multiple div tags and each of these divs will behave like a new page. Using javascript we can hide and display them. We can display only one div tag at a time. This method make the phonegap app behave like a native app and all the phonegap apps out there use this method only.
Let’s see a sample demo of this method:
If you are too lazy to write code for this then you can use jQuery Mobile multiple pages functionality. jQuery will handles all page transitions for you.
Here is an example of multiple pages using jQuery mobile:
