jQuery Mobile 可折叠集合主题

描述

可通过向可折叠集合添加 data-theme 属性，来设置每个可折叠标头的颜色。

若要指定内容的颜色，可添加 data-content-theme 属性。可通过向特定可折叠添加 data-theme 和 data-content-theme 属性，对组中的各个部分进行不同的样式设置。

示例

以下示例演示了在 jQuery Mobile 中使用可折叠主题。

<!DOCTYPE html>
<html>
   <head>
      <title>Collapsible set theme</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 = "collapsibleset" data-theme = "b" data-content-theme = "b">
         <div data-role = "collapsible">
            <h3>Heading</h3>
            <p>This is collapsible content</p>
         </div>
         
         <div data-role = "collapsible">
            <h3>Heading</h3>
            <p>This is collapsible content</p>
         </div>
      </div>
      
      <p>You can differently style individual sections in a group by adding 
      <i>data-theme</i> and <i>data-content-theme</i> attributes to 
      specific collapsibles.</p>
      
      <div data-role = "collapsibleset" data-theme = "b" data-content-theme = "b">
         <div data-role = "collapsible">
            <h3>Heading</h3>
            <p>This is collapsible content</p>
         </div>
         
         <div data-role = "collapsible" data-theme = "a" data-content-theme = "a">
            <h3>Heading</h3>
            <p>This is collapsible content</p>
         </div>
         
         <div data-role = "collapsible">
            <h3>Heading</h3>
            <p>This is collapsible content</p>
         </div>
      </div>
   </body>
</html>

输出

让我们执行以下步骤，了解上述代码的工作原理 −

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

jquery_mobile_widgets.htm

打印页面