- Balises pour accordéon
- Thèmes pour contenu accordéon
- Thèmes différents pour chaque volet d'un accordéon (entête et cotenu)
Balises pour accordéon
Les ensembles pliables débutent avec exactement le même balisage qu'un accordéon individuel. En ajoutant une balise enveloppante avec l'attribut data-role="collapsible-set" autour d'un certain nombre de sections, le framework fera en sorte que cet ensemble ressemble à un accordéon dont une seule section à la fois peut être ouverte. Consultez la référence sur l'attribut data- pour voir tous les attributs possibles, que vous pouvez ajouter aux ensembles repliables.
Par défaut, toutes les sections sont rétractées. Pour forcer l'ouverture d'une section lorsque la page est chargée, ajoutez l'attribut data-collapsed="false" dans l'entête de la section que vous souhaitez déployer.
<div data-role="collapsible-set"> <div data-role="collapsible" data-collapsed="false"> <h3>Section 1</h3> <p>Je suis le contenu de la section pliable 1.</p> </div> <div data-role="collapsible"> <h3>Section 2</h3> <p>Je suis le contenu de la section pliable 2</p> </div> </div>
Voici un exemple d'accordéon comportant 5 sections.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Accordéon à 5 volets</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Accordéon à 5 volets</h1> </div><!-- /header --> <div data-role="content"> <div data-role="collapsible-set"> <div data-role="collapsible" data-collapsed="false"> <h3>Section 1</h3> <p>Je suis le contenu pliable/dépliable d´un ensemble formant un accordéon. Je suis ouvert par défaut parce que j´ai l´attribut <code>data-collapsed="false"</code>.</p> </div> <div data-role="collapsible"> <h3>Section 2</h3> <p>Je suis le contenu pliable/dépliable d´un ensemble formant un accordéon. Je suis masqué par défaut parce que mon état est ´collapsed´. Vous devez cliquer sur mon entête pour me voir.</p> </div> <div data-role="collapsible"> <h3>Section 3</h3> <p>Je suis le contenu pliable/dépliable d´un ensemble formant un accordéon. Je suis masqué par défaut parce que mon état est ´collapsed´. Vous devez cliquer sur mon entête pour me voir.</p> </div> <div data-role="collapsible"> <h3>Section 4</h3> <p>Je suis le contenu pliable/dépliable d´un ensemble formant un accordéon. Je suis masqué par défaut parce que mon état est ´collapsed´. Vous devez cliquer sur mon entête pour me voir.</p> </div> <div data-role="collapsible"> <h3>Section 5</h3> <p>Je suis le contenu pliable/dépliable d´un ensemble formant un accordéon. Je suis masqué par défaut parce que mon état est ´collapsed´. Vous devez cliquer sur mon entête pour me voir.</p> </div> </div> </div><!-- /content --> <div data-role="footer"> <h4>Contenu du pied de page</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
Voir le résultat : Exemple d'accordéon comportant cinq sections.
Thème pour contenu d'un accordéon
L'attribut standard data-theme peut être utilisé pour fixer la couleur de chaque contenu dépliable dans l'accordéon. Pour fournir un regroupement visuel plus clair du contenu avec les entêtes, ajoutez l'attribut data-content-theme suivi d'une lettre indiquant le thème. Ceci ajoute une couleur à l'arrière-plan ainsi qu'un une bordure au bloc de contenu. Pour une cohérence visuelle, ajoutez ces attributs à la balise englobant cet ensemble d'éléments pliables.
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
Exemple :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Thème pour contenu d´un accordéon</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Thème pour contenu d´un accordéon</h1> </div><!-- /header --> <div data-role="content"> <div data-role="collapsible-set" data-theme="c" data-content-theme="d"> <div data-role="collapsible"> <h3>Section 1</h3> <p>Contenu déployable</p> </div> <div data-role="collapsible"> <h3>Section 2</h3> <p>Contenu déployable</p> </div> <div data-role="collapsible"> <h3>Section 3</h3> <p>Contenu déployable</p> </div> </div> </div><!-- /content --> <div data-role="footer"> <h4>Contenu du pied de page</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
Voir le résultat : Exemple d'accordéon avec un thème appliqué au contenu.
Thèmes différents pour l'entête et le contenu de chaque section d'un accordéon
Pour avoir des sections individuelles dans un groupe de style différent, ajoutez les attributs data-theme et data-content-theme spécifique à chaque section déployable.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Thèmes différents pour l´entête et le contenu de chaque section d´un accordéon</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Thèmes différents pour l´entête et le contenu de chaque section d´un accordéon</h1> </div><!-- /header --> <div data-role="content"> <div data-role="collapsible-set" data-content-theme="c"> <div data-role="collapsible" data-theme="b" data-content-theme="b"> <h3>En-tête de Section, échantillon B</h3> <p>Contenu déployable, échantillon B</p> </div> <div data-role="collapsible" data-theme="a" data-content-theme="a"> <h3>En-tête de Section, échantillon A</h3> <p>Contenu déployable, échantillon A</p> </div> <div data-role="collapsible" data-theme="e" data-content-theme="d"> <h3>En-tête de Section, échantillon E</h3> <p>Contenu déployable, échantillon D</p> </div> </div> </div><!-- /content --> <div data-role="footer"> <h4>Contenu du pied de page</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
Voir le résultat : Exemple d'accordéon avec des thèmes différents pour le contenu et l'entête de chaque section.