Manuel:Eléments repliables

This page is a translated version of the page Manual:Collapsible elements and the translation is 100% complete.
MediaWiki propose des classes repliables supplémentaires pour MediaWiki 1.18 et suivants. Pour les versions communautaires plus anciennes, voir cette version.

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
|}
Légende
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 :

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
|}
La légende reste visible.
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.
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 :

Ce texte est repliable. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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 :

Exemple Lorem ipsum
Ce texte est repliable. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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 :

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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

Cette méthode est inaccessible et déroutante pour les utilisateurs de lecteurs d'écran; évitez de l'utiliser.

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

Texte du 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.

Mon tableau avec des informations repliables
Titre Exemple
Lorem Ipsum
Autres informations
Nombre Lettre  
1 A
2 B
3 C

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;
}

Voir aussi