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.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>
    
      <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:///toolbar_external.html 開啟，將顯示以下輸出。

jquery_mobile_widgets.htm

列印頁面