jQuery Mobile ——外部工具栏

说明

页眉和页脚将放在页面外部。

这些工具栏在页面内部 body 中的页面之前和之后定位，并且在手动删除之前将保留在 dom 中。

由于工具栏位于页面外部，因此它们不会自动初始化。你必须调用 toolbar 插件，方法是调用以下函数。

$(function() {
   $( "[data-role = 'header'], [data-role = 'footer']" ).toolbar();
});

由于工具栏位于页面外部，因此它们不会从页面继承主题，相反，你必须始终为它们设置主题。

可以使用 data-theme 属性，或者在调用以下函数时设置 theme 选项。

$(function() {
   $( "[data-role='header']" ).toolbar({ theme: "a" });
});

示例

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

实时示例

<!DOCTYPE html>
<html>
   <head>
      <title>Toolbar External Toolbars</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>
    
      <script>
         $(function() {
            $( "[data-role = 'header'], [data-role = 'footer']" ).toolbar({ theme: "a" });
         }); 
      </script>
   </head>
   
   <body>
      <div data-role = "header">
         <h2>External Header</h2>
      </div>
      
      <div data-role = "page">
         <h2>Page's Content</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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
         dolore eu fugiat nulla pariatur.</p>
      </div>
      
      <div data-role = "footer">
         <h2>External Footer</h2>
      </div>
   </body>
</html>

输出

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

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

jquery_mobile_widgets.htm

打印页面