Filtrage rapide et facile avec jQuery

Dans cette semaine screencast, nous allons apprendre à mettre en œuvre un filtrage rapide et incorrect sans base de données. En appliquant quelques classes et une touche de jQuery, nous pouvons mettre en place un joli petit système très rapidement.

Vue d'ensemble

Hier encore, on m'a demandé comment j'ai pu créer la fonctionnalité de tri simple qui se trouve sur la page Vault de mon blog. Honnêtement, cela a été fait par hâte. Bien que je finisse par tout passer par une base de données et le trier de cette façon, pour le moment, il me fallait un moyen rapide et sale de le faire avec JavaScript. Je vais te montrer ce que j'ai fait.

Tutoriel vidéo de 20 minutes

Autres options de visualisation

• Télécharger la vidéo
• Version iTunes

Le jQuery final

Mis à jour un peu de la vidéo.

 var ulOptions = '

• Tout
• PHP
• CSS
• JavaScript
• HTML

'; var $ links = $ ('# links'); $ links.before (ulOptions) .children ('li') .addClass ('all') .filter ('li: impair') .addClass ('impair'); $ ('# options li a'). click (fonction () var $ this = $ (this), tapez = $ this.attr ('classe'); $ links.children ('li') .removeClass (' odd ') .hide () .filter ('. '+ type) .show () .filter (': odd ') .addClass (' odd '); return false;);

Mise à jour: petit insecte sournois

"SFdude" a trouvé un bogue dans lequel, si vous cliquez deux fois sur le même article, la liste entière disparaît! Heureusement, j'ai pu déterminer le problème rapidement. Le problème était qu'après le premier clic, nous avons appliqué une classe de "sélectionné" à la balise d'ancrage. C'est ce qui causait le hoquet. Parce que maintenant - il y avait deux classes qui ne correspondraient à rien! Le correctif consiste à supprimer ces deux lignes:

 $ ('# options li a'). removeClass ('selected'); $ this.addClass ('sélectionné');

En vérité, ils étaient inutiles. Nous pouvons tout aussi facilement utiliser le sélecteur a: focus de notre feuille de style pour accomplir cela. :)

 a: focus font-weight: bold; 

Et ça le fait. J'ai mis à jour la démo et le code source. Merci à SFdude d'avoir trouvé ce petit bug sournois.

Alors, quelles sont vos pensées? Pas d'accord avec cette méthode? Y a-t-il une meilleure façon de le faire - sans base de données? Faites le moi savoir!

Merci, Screencast.com!

… Pour l'hébergement de ces didacticiels vidéo.

• Suivez-nous sur Twitter ou abonnez-vous au fil RSS Nettuts + pour obtenir plus d'articles et de sujets sur le développement Web quotidiens.