jQuery Mobile Pages
Start Learning jQuery Mobile
 |
Although jQuery Mobile is compatible with all mobile devices, it is not fully compatible with PCs (due to limited CSS3 support). For a better reading experience of this tutorial, it is recommended to use the Google Chrome browser. |
|---|
Examples
<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>
<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 Analysis:
- data-role="page" is the page displayed in the browser.
- data-role="header" is a toolbar created at the top of the page (usually used for titles or search buttons).
- data-role="main" defines the content of the page, such as text, images, forms, buttons, etc.
- The "ui-content" class is used to add padding and margins to the page.
- data-role="footer" is used to create a toolbar at the bottom of the page.
- You can add any HTML elements in these containers - paragraphs, images, headings, lists, etc.
|
jQuery Mobile relies on HTML5 data-* attributes to support various UI elements, transitions, and page structures. Browsers that do not support them will silently ignore them. |
|---|
Add jQuery Mobile to Your Page
With jQuery Mobile, you can create multiple different pages in a single HTML file.
You can use different href attributes to refer to pages with unique ids:
Examples
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<a href="#pagetwo">Jump to the second page</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="main" class="ui-content">
<a href="#pageone">Jump to the first page</a>
</div>
</div>
<div data-role="main" class="ui-content">
<a href="#pagetwo">Jump to the second page</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="main" class="ui-content">
<a href="#pageone">Jump to the first page</a>
</div>
</div>
Try it Yourself »
Note:When a web application has a large amount of content (text, images, scripts, etc.), it will seriously affect loading time. If you don't want to use internal page links, you can use external files:
<a href="externalfile.html">访问外部文件</a>
Pages as Dialogs
A dialog is used to display page information or to input form information.
Add data-rel="dialog" to a link to make a dialog pop up when the user clicks the link:
Examples
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<a href="#pagetwo">Jump to the second page</a>
</div>
</div>
<div data-role="page" data-dialog="true" id="pagetwo">
<div data-role="main" class="ui-content">
<a href="#pageone">Jump to the first page</a>
</div>
</div>
<div data-role="main" class="ui-content">
<a href="#pagetwo">Jump to the second page</a>
</div>
</div>
<div data-role="page" data-dialog="true" id="pagetwo">
<div data-role="main" class="ui-content">
<a href="#pageone">Jump to the first page</a>
</div>
</div>
Try it Yourself »