jQuery Mobile - 可摺疊主題

描述

若要設定可摺疊主題，你可以使用data-theme，並新增data-content-theme 屬性和指定的主題樣本字母。你可以將data-content-theme設定為false，以避免可摺疊內容的預設繼承。

預設 jQuery Mobile 主題包括多種色板，如a、b、c、d和e。色板是一種統一的顏色概念，它控制諸如顏色、背景、文字等許多內容。這些色板可以應用到各個物件上。

示例

下面的例子演示了在 jQuery Mobile 中使用可摺疊主題。

現場演示

<!DOCTYPE html>
<html>
   <head>
      <title>Collapsible Theme</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 = "collapsible" data-theme = "b" data-content-theme = "b">
         <h4>Heading</h4>
         <p>Hi! This is collapsible content with a themed block of content set to "b".</p>
      </div>

      <div data-role = "collapsible" data-content-theme = "false">
         <h4>Heading</h4>
         <p>Hi! This is collapsible content without a theme.</p>
      </div>
   </body>
</html>

輸出

讓我們執行以下步驟，瞭解上面的程式碼如何工作 -

將上面的 html 程式碼儲存為伺服器根目錄中的collapsible_theme.html 檔案。
將此 HTML 檔案作為 https:///collapsible_theme.html 開啟，將顯示以下輸出。

jquery_mobile_widgets.htm

列印頁面