Basculer

Intention

Plugiciel qui permet un lien à basculer des éléments entre les états activé et désactivé.

Needs translation

Plugin Setup

Adding the .wb-toggle CSS class to any element will turn it into a toggle element. The behaviour of this toggle element is then controlled by the data-toggle attribute which takes a JavaScript object of properties:

Property	Purpose
`selector`	CSS selector that specifies the elements the toggle element controls. If no CSS selector is supplied, the toggle element controls itself.
`parent`	CSS selector that causes the toggle element to only control elements within a given parent element.
`group`	CSS selector that groups multiple toggle elements together and only allows one of the elements to be open at a time.
`persist`	Causes a toggle element to remember its current state and re-apply it when the page reloads. Supports the following values: session: toggle state will persist until the user closes their browser window or tab. local: toggle state will persist even after the browser window or tab is closed.
`print`	Causes a toggle element to turn the elements it controls on or off when the page is printed. Supports the following values: on: elements will be set to "on" toggle state for printing. off: elements will be set to "off" toggle state for printing.
`type`	Causes a toggle element to only turn the elements it controls on or off. Supports the following values: on: toggle element will only turn elements to the "on" toggle state. off: toggle element will only turn elements to the "off" toggle state.
`state` (v4.0.11+)	Sets the initial state of a toggle element. Supports the following values: off (default): Toggle element initial state is "off" on: Toggle element initial state is "on"
`stateOn`	CSS class that's added to elements when they are toggled on. Defaults to "on".
`stateOff`	CSS class that's added to elements when they are toggled off. Defaults to "off".

For example, the following element will always toggle on elements with the .foo CSS class that are contained in a parent with the .bar CSS class. In addition, the elements it controls will be toggled on when the page is printed.

<button type="button" class="wb-toggle" data-toggle='{"type": "on", "selector": ".foo", "parent": ".bar", "print": "on"}'>Turn on</button>

Exemple simple

Éléments de détails

Exemple 1

Le contenu d'exemple qui fournit plus de détails.

Tasses de café bues par chaque député
Nom	Tasses	Type de café	Sucre?
T. Sexton	10	Expresso	Non
J. Dinnen	5	Déca	Oui

Exemple 2

Le contenu d'exemple qui fournit plus de détails.

Tasses de café bues par chaque député
Nom	Tasses	Type de café	Sucre?
T. Sexton	10	Expresso	Non
J. Dinnen	5	Déca	Oui

Exemple 3

Le contenu d'exemple qui fournit plus de détails.

Tasses de café bues par chaque député
Nom	Tasses	Type de café	Sucre?
T. Sexton	10	Expresso	Non
J. Dinnen	5	Déca	Oui

États d’impression

Les paramètres "print": "on" et "print": "off" peuvent être utilisés pour contrôler s’il faut toujours ouvrir/fermer les éléments de <details> normaux lors de l’impression :

Toujours ouvert lors de l’impression ("print": "on")

Le contenu d'exemple qui fournit plus de détails.
Toujours fermé lors de l’impression ("print": "off") (pas recommandé)

Le contenu d'exemple qui fournit plus de détails.

Basculer groupe

Cette paramètre group restreint bascule groupées d'avoir un seul des éléments actifs à un moment un peu comme le comportement de case à cocher groupées.

Exemple 1

Le contenu d'exemple qui fournit plus de détails.

Tasses de café bues par chaque député
Nom	Tasses	Type de café	Sucre?
T. Sexton	10	Expresso	Non
J. Dinnen	5	Déca	Oui

Exemple 2

Le contenu d'exemple qui fournit plus de détails.

Tasses de café bues par chaque député
Nom	Tasses	Type de café	Sucre?
T. Sexton	10	Expresso	Non
J. Dinnen	5	Déca	Oui

Exemple 3

Le contenu d'exemple qui fournit plus de détails.

Tasses de café bues par chaque député
Nom	Tasses	Type de café	Sucre?
T. Sexton	10	Expresso	Non
J. Dinnen	5	Déca	Oui

Accordéon

La fonction de basculement de groupe du plugin peut également être utilisé pour créer un accordéon:

Example 1

Le contenu d'exemple qui fournit plus de détails.

Tasses de café bues par chaque député
Nom	Tasses	Type de café	Sucre?
T. Sexton	10	Expresso	Non
J. Dinnen	5	Déca	Oui

Example 2

Le contenu d'exemple qui fournit plus de détails.

Tasses de café bues par chaque député
Nom	Tasses	Type de café	Sucre?
T. Sexton	10	Expresso	Non
J. Dinnen	5	Déca	Oui

Exemple 3

Le contenu d'exemple qui fournit plus de détails.

Tasses de café bues par chaque député
Nom	Tasses	Type de café	Sucre?
T. Sexton	10	Expresso	Non
J. Dinnen	5	Déca	Oui

Conserver l'état de bascule

L'état de bascule de l'élément details ci-desous persistra tant que le fureteur (ou onglet) demeure ouvert.

Exemple 1

Le contenu d'exemple qui fournit plus de détails.

Tasses de café bues par chaque député
Nom	Tasses	Type de café	Sucre?
T. Sexton	10	Expresso	Non
J. Dinnen	5	Déca	Oui

Détails de la page

Date de modification :: 2024-08-26