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 :

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
Date de modification :