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

jquery_mobile_widgets.htm

列印頁面

jQuery Mobile - 工具欄標記

描述

示例

輸出