Manuel:Eléments repliables
jQuery.makeCollapsible
- Voir aussi la documentation de jQuery.makeCollapsible pour plus d'informations sur son fonctionnement.
- Voir aussi : Manual:Collapsible elements/Demo/Advanced pour plus d'exemples.
Ce module est dans le noyau MediaWiki par défaut depuis MediaWiki 1.18 et supérieur. Ce module est livré avec MediaWiki par défaut. Vous n'avez pas besoin de le copier sur un wiki. Le source (si cela vous intéresse) se trouve dans le dépôt du noyau de MediaWiki (resources/src/jquery/jquery.makeCollapsible.js et resources/src/jquery/jquery.makeCollapsible.css).
Ajoutez la classe mw-collapsible à n'importe quel élément (div, table, liste, n'importe quoi) pour le déclencher.
Cela ne fonctionne pas sur Habillage:Minerva Neue (phab:T111565).
Notez-bien que la fonction Recherche des navigateurs ne prend pas en compte le contenu des éléments repliés (phab:T327893).
Tableau
Un tableau peut être replié comme n'importe quel autre élément. La différence est qu'une partie du tableau reste visible, même lorsqu'elle est réduite. Un tableau avec une légende garde sa légende visible :
{| class="mw-collapsible"
|+ Légende
|-
! scope="col" | Entête 1
! scope="col" | Entête 2
|-
| Donnée 1
| Donnée 2
|}
| Entête 1 | Entête 2 |
|---|---|
| Donnée 1 | Donnée 2 |
Un tableau sans légende garde sa première ligne visible :
{| role="presentation" class="mw-collapsible"
|-
| Lorem
| ipsum  
|-
| dolor
| sit
|}
Résultat :
| Lorem | ipsum |
| dolor | sit |
Avec état initial spécifié
Vous pouvez ajouter mw-collapsed après mw-collapsible pour que le contenu soit réduit par défaut lorsque vous chargez la page.
Pour définir l'état initial réduit, ajoutez "mw-collapsed", comme indiqué dans le tableau suivant :
{| class="mw-collapsible mw-collapsed wikitable"
! colspan="2" | L'entête reste visible.  
|-
| Ce contenu || est masqué
|-
| au premier || chargement
|}
| L'entête reste visible. | |
|---|---|
| Ce contenu | est masqué |
| au premier | chargement |
{| class="mw-collapsible mw-collapsed wikitable"
|+ style=white-space:nowrap | La légende reste visible.
|-
! Texte !! Texte supplémentaire
|-
| Ce contenu || est masqué
|-
| au premier || chargement
|}
| Texte | Texte supplémentaire |
|---|---|
| Ce contenu | est masqué |
| au premier | chargement |
Vous pouvez ajouter une bordure autour de la légende pour qu'il soit plus facile de la voir quand il s'agit d'un tableau réduit :
|+ style="white-space:nowrap; border:1px solid; padding:3px;" | La légende reste visible.
| Texte | Texte supplémentaire |
|---|---|
| Ce contenu | est masqué |
| au premier | chargement |
Simple
<!-- overflow:auto; pour corriger l'affichage replié, car le lien de bascule comportait float:right;. -->
<div class="toccolours mw-collapsible" style="width:400px; overflow:auto;">
Ce texte est repliable. {{Lorem}}
</div>
Résultat :
En utilisant les attributs data-collapsetext et data-expandtext, on peut définir un texte personnalisé pour les étiquettes de basculement ajoutées par le script.
Lorsqu'ils sont ajoutés dans le wikicode, ils peuvent être remplis par un message localisé comme :
<div class="mw-collapsible" data-expandtext="{{int:show}}" data-collapsetext="{{int:hide}}">
Simple avec titre
<div class="toccolours mw-collapsible" style="width:400px; overflow:auto;">
<div style="font-weight:bold;line-height:1.6;">Exemple Lorem ipsum</div>
<div class="mw-collapsible-content">
Ce texte est repliable. {{Lorem}}
</div></div>
Résultat :
Avec partie repliable spécifiée
Par défaut, un élément repliable non-tableau se replie complètement.
Pour garder certains contenus visibles, même lorsqu'ils sont réduits, vous pouvez spécifier quelle partie du contenu est repliable.
<div class="toccolours mw-collapsible mw-collapsed">
Ce texte n'est pas repliable; mais le texte suivant l'est mais il est caché par défaut :
<div class="mw-collapsible-content">{{Lorem}}</div>
</div>
Résultat :
Ce texte n'est pas repliable; mais le texte suivant l'est mais il est caché par défaut :
Emplacement personnalisé du lien permettant de basculer
| Version de MediaWiki : | ≥ 1.41 |
Vous pouvez indiquer dans l'élément replié, la position du lien de basculement, en ajoutant à l'intérieur, un élément de classe mw-collapsible-toggle-placeholder.
Le marqueur sera substitué complètement par un lien classique de baculement, à la position exacte dans le DOM où vous l'aurez placé.
Voir la démonstration avancée pour un exemple.
Vous pourrez combiner ceci avec une partie repliable spécifique (voir ci-dessus), et sortir le marqueur d'emplacement de l'élément mw-collapsible-content, pour être sûr que le lien reste accessible quand l'élément est replié.
Avec lien personnalisé de basculement
Si vous ne voulez pas que le script place le lien bascule par défaut (avec ou non une étiquette personnalisée) dans votre élément, vous pouvez en créer un vous-même.
Cela peut se faire n'importe où, à l'intérieur de l'élément repliable, ou à l'extérieur.
Sa relation avec l'élément repliable est détectée en utilisant un attribut ID de préfixe mw-customcollapsible et un attribut de la classe correspondante de préfixe mw-customtoggle, respectivement pour l'élément repliable et pour le lien de basculement.
<span class="mw-customtoggle-myDivision">Lien de basculement</span>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision">Lien de basculement</div>
<span class="mw-customtoggle-myDivision">Lien supplémentaire de basculement</span>
Résultat :
Lien de basculement
Lien supplémentaire de basculement
A l'intérieur d'un autre élément
Vous pouvez également utiliser des éléments réductibles à l'intérieur d'autres éléments, comme un tableau.
| Titre | Exemple | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Lorem | Ipsum | ||||||||
| Autres informations |
|
Placer le lien de basculement à la gauche
Les images larges et les URL longues dans les tableaux ou éléments réductibles peuvent entraîner le basculement du lien hors écran vers la droite lorsqu'il est développé. Sur les téléphones portables par exemple. Parfois, il est difficile ou impossible d'accéder au lien bascule pour cliquer dessus et le fermer. Le CSS suivant place le lien bascule tout à gauche et laisse un peu d'espace entre lui et le texte à sa droite. La position du lien bascule ne change pas lorsque le tableau ou l'élément est développé ou réduit. Ajoutez le CSS dans common.css en modifiant la page MediaWiki:Common.css. Modifiez également mobile.css si vous importez jquery.makeCollapsible dans mobile.js. Pour les exemples, voir common.css, mobile.js, et mobile.css
/* Eléments repliables. Lien de basculement à gauche.
/* La marge autour est ajustée. */
.mw-collapsible span.mw-collapsible-toggle {
float:left;
margin-left:0;
margin-right:1em;
}
Suppression des crochets de la bascule
Si vous souhaitez masquer les crochets dans les liens de basculement d'étiquette par défaut ou personnalisés (pour des raisons esthétiques ou autres) :
.mw-collapsible-toggle-default:before, .mw-collapsible-toggle-default:after {
display: none;
}