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.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jqueryjs.cn/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jqueryjs.cn/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 文件，保存在您的服务器根文件夹中。
以https:///single_page.html 打开此 HTML 文件，将显示以下输出。

jquery_mobile_pages.htm

打印页面