Description
SortJs est une mini librairie vous permettant de faire un trie basique en manipulant le DOM et en exploitant la puissance du data-* attribute.
L'idée de l'écrire m'est venu lorsque j'étais confronté à faire un trie lors de l'intégration d'une maquette statique en bootcamp et qu'il fallait importer un plugin qui étant "lourd" ne nous étais pas bénéfique en matière de perfomance, j'espère qu'il sera utile et qu'il se paufinera au fil du temps :)
Comment utiliser?
1. Copier le cdn ou le code
export function sort(t,l){t.forEach(t=>{t.onclick=()=>{let a=t.dataset.role;setTimeout(()=>{for(let t of l){t.style.display="initial";t.dataset.list.match(a)||(t.style.display="none")}},500)}})}
2. Ajoutez-le à votre site web
selon la méthode choisie, vous pouvez l'ajouter de plusieurs façon:
3. Appliquez-le à votre code
-
Ajoutez un attribut
data-role
à votre bouton de trie et donnez lui une valeur; -
Ajoutez un attribut
data-list
et comme valeur la valeur dudata-role
définis à tout les éléments qui seront révélé au clic sur le bouton trie;
Demo
Résultat
- ALL
- FISH
- MEAT
- VEGAN