jQuery Mobile page
May 21, 2021 jQuery Mobile
Table of contents
jQuery Mobile page
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).
To better read this tutorial, we recommend that you use Google Chrome. |
|---|
<body>
<div data-role="page" >
<div data-role="header" >
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="content" >
<p>我现在是一个移动端开发者!!</p>
</div>
<div data-role="footer" >
<h1>底部文本</h1>
</div>
</div>
</body>
<div data-role="page" >
<div data-role="header" >
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="content" >
<p>我现在是一个移动端开发者!!</p>
</div>
<div data-role="footer" >
<h1>底部文本</h1>
</div>
</div>
</body>
Try it out . . .
Instance resolution:
- 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 "content" defines the content of the page, such as text, pictures, forms, buttons, etc.
- Data-role "footer" is used to create toolbars at the bottom of the page.
- In these containers you can add any HTML element - paragraph, picture, title, list, etc.
|
jQuery Mobile relies on HTML5 data-? properties to support a variety of UI elements, transitions, and page structures. Browsers that do not support them will deprecte them silently. |
|---|
Add jQuery Mobile to the page
With jQuery Mobile, you can create multiple different pages in a single HTML file.
You can use different href properties to distinguish pages that use the same unique id:
<div data-role="page"
id="pageone"
>
<div data-role="content">
<a href="#pagetwo" >Go to Page Two</a>
</div>
</div>
<div data-role="page" id="pagetwo" >
<div data-role="content">
<a href="#pageone" >Go to Page One</a>
</div>
</div>
<div data-role="content">
<a href="#pagetwo" >Go to Page Two</a>
</div>
</div>
<div data-role="page" id="pagetwo" >
<div data-role="content">
<a href="#pageone" >Go to Page One</a>
</div>
</div>
Try it out . . .
Note: When a web app has a lot of content (text, pictures, scripts, etc.) it can seriously affect load times. If you don't want to use the inner page link, you can use an external file:
<a href="externalfile.html">访问外部文件</a>
The page is used as a dialog box
A dialog box is an input that displays page information display or form information.
Add data-rel"dialog" to the link to let the dialog box pop up when the user clicks on the link:
<div data-role="page" id="pageone">
<div data-role="content">
<a href="#pagetwo" data-rel="dialog" >Go to Page Two</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="content">
<a href="#pageone">Go to Page One</a>
</div>
</div>
<div data-role="content">
<a href="#pagetwo" data-rel="dialog" >Go to Page Two</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="content">
<a href="#pageone">Go to Page One</a>
</div>
</div>
Try it out . . .