jQuery Mobile - 单页
描述
标准格式用于多次创建页面而不更改它。 以下标准格式用于在 jQuery Mobile 中创建单个页面。
<div data-role = "page">
<div data-role = "header">
<h1>Page Title</h1>
</div>
<div role = "main" class = "ui-content">
<p>Page content goes here.</p>
</div>
<div data-role = "footer">
<h4>Page Footer</h4>
</div>
</div>
示例
下面的例子演示了在 jQuery Mobile 中使用单页。
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "page" id = "pageone">
<div data-role = "header">
<h1>Single Page</h1>
</div>
<div data-role = "main" class = "ui-content">
<h2>Welcome to TutorialsPoint</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book.</p>
<p>It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout. The point of using
Lorem Ipsum is that it has a more-or-less normal distribution of letters,
as opposed to using 'Content here, content here', making it look like readable
English. Many desktop publishing packages and web page editors now use Lorem
Ipsum as their default model text, and a search for 'lorem ipsum' will uncover
many web sites still in their infancy</p>
</div>
<div data-role = "footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
输出
让我们执行以下步骤，看看上面的代码是如何工作的 −
将上述 html 代码保存为服务器根文件夹中的 single_page.html 文件。
将此 HTML 文件打开为 http://localhost/single_page.html，将显示以下输出。
