jQuery Mobile - Tema dell'insieme pieghevole

Descrizione

Il colore di ciascuna intestazione pieghevole può essere impostato aggiungendo un attributo del tema dei dati all'insieme comprimibile.

Per specificare il colore del contenuto, puoi aggiungere l'attributo data-content-theme. Puoi applicare uno stile diverso alle singole sezioni di un gruppo aggiungendo attributi data-theme e data-content-theme a specifici file compressibili.

Esempio

L'esempio seguente mostra l'uso del tema pieghevole in 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>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra come collapsible_set_theme.html file nella cartella principale del server.

  • Apri questo file HTML come http: //localhost/collapsible_set_theme.html e verrà visualizzato il seguente output.