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
<body>
<div data-role="page">
<div
data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
<p>I Am Now A Mobile Developer!!</p>
</div>
<div data-role="footer">
<h1>Footer
Text</h1>
</div>
</div>
</body>
Try it Yourself »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:
Example
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<a href="#pagetwo">Go to
Page Two</a>
</div>
</div>
<div data-role="page"
id="pagetwo">
<div
data-role="main" class="ui-content">
<a href="#pageone">Go to Page
One</a>
</div>
</div>
Try it Yourself »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:
<a href="externalfile.html">Go To External Page</a>
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:
Example
<div data-role="page" id="pageone">
<div
data-role="main" class="ui-content">
<a href="#pagetwo">Go to Page Two</a>
</div>
</div>
<div data-role="page"
data-dialog="true" id="pagetwo">
<div
data-role="main" class="ui-content">
<a href="#pageone">Go to Page One</a>
</div>
</div>
Try it Yourself »