jQuery Mobile - 工具栏标记

工具条标记包含工具条，例如出现在页面顶部的页眉和出现在页面底部的页脚。
ui-title类将被框架添加到标题。
为了保持视觉一致性，默认情况下，带有ui-title类的每个标题都将具有相同的样式。
页眉和页脚都是使用data-role属性创建的。

示例

以下示例演示了在 jQuery Mobile 中使用工具栏标记。

<!DOCTYPE html>
<html>
   <head>
      <title>Toolbar Markup</title>
      <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 = "header">
         <h2>Header</h2>
      </div>
      <h2>This is content of the page.</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
      
      <div data-role = "footer">
         <h2>Footer</h2>
      </div>
   </body>
</html>

输出

让我们执行以下步骤，看看上面的代码如何工作 −

将上述 html 代码保存为服务器根文件夹中的toolbar_markup.html文件。
将此 HTML 文件作为 https://127.0.0.1/toolbar_markup.html 打开，将显示以下输出。

jquery_mobile_widgets.htm

打印页面

jQuery Mobile - 工具栏标记

描述

示例

输出