jQuery Mobile Pages

Create a Page

	Even though jQuery Mobile works on all mobile devices, it may have some compatibility issues on desktop computers (due to limited CSS3 support). For this tutorial, we recommend that you use the Google Chrome Browser for better reading experience.

Below, we have created a simple, standard jQuery Mobile page:

Example explained:

• The data-role="page" is the page displayed in the browser
• The data-role="header" creates a toolbar at the top of the page (often used for title or search buttons)
• The data-role="main" defines the content of the page, like text, images, buttons, forms, etc.
• The "ui-content" class adds extra padding and margin inside the page content
• The data-role="footer" creates a toolbar at the bottom of the page
• Inside these containers, you can add any HTML elements - paragraphs, images, headings, lists, etc.

	The HTML5 data-* attributes are used throughout jQuery Mobile to create a "touch-friendly" and attractive look for mobile devices.

Adding Pages in jQuery Mobile

In jQuery Mobile, you can create multiple pages in a single HTML file.

Separate each page with a unique id and use the href attribute to link between them:

Tip: The load time will be affected by web applications with a lot of content (i.e text, links, images, scripts etc). Use external files if you don't want to link pages internally:

Using Pages as Dialogs

A dialog box is a type of window used to show special information or request input.

To create a dialog box that opens when a user taps on a link, add data-dialog="true" to the page you want displayed as a dialog: