Alertes repliables

But

Ce plugiciel a pour but de permettre à la classe .alert d'être utilisé avec un bloc details / summary afin de permettre la création d'alertes qui peuvent être repliées par l'utilisateur. Le plugiciel utilise la technologie « Local Storage » pour permettre au navigateur Web de se rappeler de l'état de l'alerte (ouverte ou repliées).

Exemples pratiques

• Exemple anglais
• Exemple français

Comment mettre en œuvre

Pour utiliser les alertes repliables, un bloc details/summary doit posséder ce qui suit :

• L'élément details doit posséder :

  • Une classe alerte valide :
    p. ex. alert alert-success.

  • Un attribut id d'une valeur unique. Réutiliser cette valeur sur toutes les pages où il est souhaité que l'état de l'alerte soit maintenu. Par exemple, si l'utilisateur replie une alerte avec un attribute id d'une valeur de « alerte-123 » sur une page A et navigue ensuite vers une page B où il existe aussi une alerte dont le id est de « alerte-123 », l'arte de la page B sera déjà repliée lorsque l'utilisateur chargera la page.

  • Un attribut open pour que son état par défaut soit ouvert. Omettre l'attribut open rendera l'état par défaut replié.

• L'élément summary doit posséder une classe qui correspond à celle de son élément enfant pour que le pointeur (le triangle) soit de la bonne taille. Par exemple, lorsque l'enfant de summary est un h3, summary doit avoir une classe h3.

• Finalement, toute alerte repliée devrait être contenue à l'intérieur d'un élément section et l'enfant de l'élément summary devrait être un élément titre.

<section>
	<details class="alert alert-success" id="alert-success" open="open">
		<summary class="h3">
			<h3>Bien joué!</h3>
		</summary>
		<p>Vous avez lue une <a href="#" class="alert-link">alerte importante</a>.</p>
	</details>
</section>

Code source

Code source du plugiciel Alertes repliables sur GitHub