Attention: vous trouverez une évolution de ce code ici: [jQuery] Un plugin pour afficher/masquer des éléments dans une page et conserver leur état en cache.
nui = naked UI = code stripped to the core.
Dans mon exemple, j’utilise cette fonction pour un composant Off-Canvas qui propose une navigation interne à la page (via des ancres). J’affiche/masque l’élément en exploitant la valeur booléenne de la pseudo-classe aria-expanded que j’habille via CSS. Pas de SASS (pour l’instant), désolé…
J’utilise également Animate CSS pour apporter un peu d’animation au tout via les classes animated fadeInUp et le kit d’icônes Font Awesome pour les chevrons.
How to Create a Basic Plugin sur jquery.com. Essential jQuery Plugin Patterns par Addy Osmani sur smashingmagazine.com.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="inPageNavigation" class="InPageNavigation animated fadeInUp" aria-expanded="true"> <button id="toggleInPageNavigation" class="btn-InPageNavigation--toggle" role="button"> <i class="fas fa-chevron-right" title="Masquer l'accès rapide"></i><i class="fas fa-chevron-left" title="Afficher l'accès rapide"></i> </button> <p>Accès rapide:</p> <ul> <li><a class="link" href="#typeIs01">Section 01 dans ma page</a></li> <li><a class="link" href="#typeIs02">Section 02 dans ma page</a></li> <li><a class="link" href="#typeIs03">Section 03 dans ma page</a></li> <li><a class="link" href="#typeIs04">Section 04 dans ma page</a></li> <li><a class="link" href="#typeIs05">Section 05 dans ma page</a></li> </ul> </div> |
|
1 2 3 4 5 6 7 8 9 10 |
$.fn.nuiToggleElement = function() { const $this = this; const ariaExpandedValue = $this.attr('aria-expanded'); if (ariaExpandedValue === 'true' ) { $this.attr('aria-expanded', false); } else { $this.attr('aria-expanded', true); } } |
|
1 2 3 4 5 |
// Fermer/Ouvrir l'encart d'accès rapide $('#toggleInPageNavigation').on('click', function(){ $('#inPageNavigation').nuiToggleElement(); }); // fin: Fermer/Ouvrir l'encart d'accès rapide |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
/* * Off-Canvas in-page navigation component */ /* Core */ .InPageNavigation { position: fixed; z-index: 10000; } .btn-InPageNavigation--toggle { position: absolute; } /* Skin */ .InPageNavigation { top: 10px; padding: 10px; width: 250px; border: 1px solid #bfbfbf; background: #fff; } .InPageNavigation[aria-expanded="true"] { right: 10px; } .InPageNavigation[aria-expanded="false"] { right: -250px; } .btn-InPageNavigation--toggle, .btn-InPageNavigation--toggle:hover { top: -1px; left: -40px; width: 40px; height: 40px; text-align: center; border: 1px solid #bfbfbf; border-right: none; background: #fff; font-size: 1.2em; } .InPageNavigation[aria-expanded="true"] .btn-InPageNavigation--toggle .fa-chevron-left, .InPageNavigation[aria-expanded="false"] .btn-InPageNavigation--toggle .fa-chevron-right { display: none; } /* fin: Off-Canvas in-page navigation component */ |