jQuery Mobile - Tema de conjunto plegable

Descripción

El color de cada encabezado plegable se puede establecer agregando un atributo de tema de datos al conjunto plegable.

Para especificar el color del contenido, puede agregar el atributo data-content-theme. Puede diseñar de manera diferente secciones individuales en un grupo agregando atributos de tema de datos y tema de contenido de datos a plegables específicos.

Ejemplo

El siguiente ejemplo demuestra el uso de un tema plegable en 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.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 = "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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como collapsible_set_theme.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/collapsible_set_theme.html y se mostrará el siguiente resultado.

↰ Previous page