Tagtoggle

[jQuery] Un plugin pour afficher/masquer des éléments dans une page et conserver leur état en cache

Note: ce plugin est une évolution du code posté dans un précédent billet: [jQuery] Une fonction Toggle simple pour afficher et masquer des éléments dans un page.

Demo jsfiddle.net. Appuyez sur F12 pour voir les console.log();

Se référer au Git car la doc et le code présentés dans ce billet ne sont plus à jour! nui-Toggle on GitHub.

Description

Ce plugin permet d’afficher/masquer (en off-canvas) un petit encart en sticky dans la page. Sur la capture ci-dessus il s’agit d’un petit menu, utilisé dans une page longue, qui permet de naviguer d’ancre en ancre. Le clic sur le chevron masque le menu. Le chevron reste visible afin de pouvoir, au clic, faire ré-apparaître le menu.

La petite particularité de ce plugin est qu’il gère également l’état affiché/masqué lorsque la page est rechargée (si l’utilisateur a masqué le menu, celui-ci reste masqué au rechargement de la page et pour des connexions ultérieures aussi longtemps que ce premier n’a pas cliqué pour le ré-afficher). Ce comportement est rendu possible en exploitant la propriété localStorage de l’objet Window.

Usage:

Adapter à votre source HTML

Source HTML

Ce qu’il faut comprendre: 2 choses à vérifier:

  1. Vous avez un élément parent (ici <div id="inPageNavigation">[...]</div>) qui va contenir l’ensemble des informations à afficher/masquer.
  2. Vous avez un élément OBLIGATOIREMENT enfant du parent <div id="inPageNavigation">[...]</div> qui va permettre, au clic sur celui-ci, d’afficher/masquer le parent (ici un bouton <button id="toggleInPageNavigation" class="btn-InPageNavigation--toggle" role="button"></button>, mais ça peut également être un lien).

Source JS (jQuery)

Source CSS

[jQuery] Une fonction Toggle simple pour afficher et masquer des éléments dans un page

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.

[jQuery][Gruge] Un effet Toggle avec la méthode On.(‘Click’)

Problème : l’élément sur lequel on souhaite placer le click n’accepte qu’un seul événement (on ne peut cliquer qu’une fois dessus. Au-delà, le clic ne fonctionne plus. Embêtant quand on veut faire de l’ouvrir/fermer…).

Solution: doubler l’élément sur lequel se fait l’événement click.

[jQuery][Foundation 3.5.2] Modifier le comportement natif du composant Accordion pour empêcher la fermeture d’un panneau au clic sur son en-tête

Les versions récentes de Foundation incluent toute une batterie d’options pour le composant Accordion.

Le comportement standard consiste à pouvoir fermer un panneau au clic sur son en-tête. Tous les panneaux sont alors fermés.
Nous allons modifier le code natif du composant accordion.js de Foundation 3.5.2 afin qu’un panneau ouvert ne puisse plus être fermé (par l’utilisateur) au clic sur son en-tête.

Il suffit de repérer et de commenter la ligne suivante : p.find('li').removeClass('active').end().find('.content').hide();.

[jQuery] Click/toggle entre deux fonctions (bouton play/pause, start/stop)

Source : jQuery click / toggle between two functions.
Plug-in : [jQuery-Function-Toggle-Plugin
] A jQuery plugin that binds multiple event handlers which are executed on each consecutive event
.

Ajout d’un bouton Play/Pause au carousel Bootstrap : Simulation, fil de discussion sur Stack Overflow.

Problème : lancer deux opérations (ou fonctions) distinctes lorsqu’on clique sur un seul et même bouton (bouton play/pause par exemple).

© 2020 devfrontend.info

Theme by Anders NorénUp ↑