Start learning jQuery Mobile
 | Although jQuery Mobile is compatible with all mobile devices, Not fully PC compatible (due to limited CSS3 support).
In order to better read this tutorial, it is recommended that you use Google Chrome browser. |
|---|
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="main" class="ui-content">
<p>我现在是一个移动端开发者!!</p>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
</body>
</html>
Click the "Run Instance" button to view the online instance
Instance analysis:
data-role="page" Yes 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, pictures, 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.
In these containers you can add any HTML element - paragraphs, images, titles, lists, etc.
| ##jQuery Mobile relies on HTML5 data-* attributes to support various UI elements, transitions, and page structures. Browsers that don't support them will silently deprecate them. |
|---|
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 attributes to distinguish pages using the same unique id:
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="main" class="ui-content">
<p>欢迎! 点击以下链接跳转到第二个页面。 </p>
<a href="#pagetwo">跳转到第二个页面</a>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="main" class="ui-content">
<p>这是第二个页面。点击以下链接跳转到第一个页面。</p>
<a href="#pageone">跳转到第一个页面</a>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
</body>
</html>
Click the "Run Example" button to view the online example
Note: When the web application has a large amount of content (text, pictures, scripts, etc.) 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>
Use the page as a dialog box
The dialog box is used to display page information or input form information.
Add data-rel="dialog" to the link to allow a dialog box to pop up when the user clicks the link:
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="main" class="ui-content">
<p>欢迎!</p>
<a href="#pagetwo">弹出对话框</a>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
<div data-role="page" data-dialog="true" id="pagetwo">
<div data-role="header">
<h1>我是一个对话框！</h1>
</div>
<div data-role="main" class="ui-content">
<p>对话框与普通页面不同，它显示在当期页面上, 但又不会填充完整的页面，顶部图标 "X" 用于关闭对话框。</p>
<a href="#pageone">跳转到第一个页面</a>
</div>
<div data-role="footer">
<h1>对话框底部文本</h1>
</div>
</div>
</body>
</html>
Click the "Run Instance" button to view the online instance
