Example 2-4

Index

One

I have an id of "one" on my page container. I'm first in the source order so I'm shown when the page loads.

This is a multi-page boilerplate template that you can copy to build your first jQuery Mobile page. This template contains multiple "page" containers inside, unlike a single page template that has just one page within it.

Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.

You link to internal pages by referring to the ID of the page you want to show. For example, to link to the page with an ID of "two", my link would have a href="#two" in the code.

Show internal pages:

Show page "two"

Show page "popup" (as a dialog)

Page Footer

Two

Two

I have an id of "two" on my page container. I'm the second page container in this multi-page template.

Notice that the theme is different for this page because we've added a few data-theme swatch assignments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.

Back to page "one"

Page Footer