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
Comment mettre en œuvre
Pour utiliser les alertes repliables, un bloc details/summary doit posséder ce qui suit :
-
L'élément
detailsdoit posséder :-
Une classe alerte valide :
p. ex.alert alert-success. -
Un attribut
idd'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 attributeidd'une valeur de « alerte-123 » sur une page A et navigue ensuite vers une page B où il existe aussi une alerte dont leidest de « alerte-123 », l'arte de la page B sera déjà repliée lorsque l'utilisateur chargera la page. -
Un attribut
openpour que son état par défaut soit ouvert. Omettre l'attributopenrendera l'état par défaut replié.
-
-
L'élément
summarydoit 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 desummaryest unh3,summarydoit avoir une classeh3. -
Finalement, toute alerte repliée devrait être contenue à l'intérieur d'un élément
sectionet l'enfant de l'élémentsummarydevrait ê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
- Date de modification :