Création d'un portefeuille «filtrable» avec jQuery

Si vous avez travaillé dans votre domaine pendant un certain temps, il y a de fortes chances pour que vous ayez un portefeuille plutôt volumineux. Pour faciliter la navigation, vous serez probablement tenté de les diviser en différentes catégories. Dans ce tutoriel, je vais vous montrer comment rendre le "filtrage par catégorie" un peu plus intéressant avec juste un peu de jQuery.

1. Le balisage

Notre portefeuille n'est rien de plus qu'une simple liste non ordonnée:

 
Une liste à part
 
Pomme
 
CNN
 
Digg
 
ESPN
 
Facebook
 
Google
 
Netflix
 
NETTUTS
 
Gazouillement
 
maison Blanche
 
Youtube
 

Remarque: je n'ai nullement participé à la création de ces sites merveilleux. Je ne les utilise que comme exemples.

2. Catégoriser le portefeuille

Nous allons supposer que notre portefeuille peut être divisé en 5 catégories:

• Conception
• Développement
• CMS
• L'intégration
• Architecture de l'information

Pour utiliser les catégories que nous avons définies, nous les convertirons en minuscules et remplacerons tous les espaces par des tirets:

• Design = conception
• Développement = développement
• CMS = cms
• Intégration = l'intégration
• Architecture de l'information = architecture d'information

Nous allons supposer que chaque élément du portefeuille peut appartenir à une ou plusieurs catégories. Nous allons donc ajouter de manière aléatoire les catégories que nous avons créées récemment en tant que classes aux éléments de la liste:

 
 Une liste à part 
 
 Pomme 
 
 CNN 
 
 Digg 
 
 ESPN 
 
 Facebook 
 
 Google 
 
 Netflix 
 
 NETTUTS 
 
 Gazouillement 
 
 maison Blanche 
 
 Youtube 
 

Ajout de la navigation par catégorie

Maintenant que les éléments du portefeuille sont en place, nous allons avoir besoin d’un moyen de les parcourir. Une autre liste non ordonnée devrait faire:

 
Tout
 
Conception
 
Développement
 
CMS
 
L'intégration
 
Architecture de l'information
 

Depuis que je veux la vue par défaut du portefeuille pour montrer Tout articles, j'ai assigné une classe de actuel au premier élément de la liste.

Vous allez probablement regarder cela et me questionner sur l'accessibilité de cet exemple. Ma pensée est que vous avez 3 options pour résoudre ce problème.

1. Lors de la création d'un portefeuille comme celui-ci, il existe une forte probabilité qu'il soit basé sur une base de données. Ainsi, vous devriez pouvoir créer une page distincte pour chaque catégorie. Ainsi, si un utilisateur n'a pas activé JavaScript, il peut accéder à la page séparée contenant le portefeuille filtré..
2. Vous pouvez utiliser une technique similaire à celle de mon dernier tutoriel: définir un paramètre dans l'URL.
3. Vous pouvez toujours écrire dans la navigation avec JavaScript avant les éléments du portefeuille:

   $ (document) .ready (fonction () $ ('ul # portfolio'). before ('
   Tout
   Conception
   Développement
   CMS
   L'intégration
   Architecture de l'information
   '); );

Ok, vous avez mes notes sur l'accessibilité, alors ne me critiquez pas pour ne pas y penser.

3. Le CSS

Ce tutoriel ne concerne pas le CSS, je vais donc parcourir le CSS assez rapidement.

Je commence toujours avec quelques styles de base comme une sorte de cadre, donc je ne vais pas les passer en revue pour le moment. Ces styles agissent fondamentalement comme une réinitialisation et définissent un style pour les éléments de base.

Pour commencer, je veux juste afficher les catégories en haut horizontalement avec une bordure entre elles:

ul # filter float: left; taille de police: 16px; style de liste: aucun; marge gauche: 0; largeur: 100%;  ul # filtre li bordure-droite: 1px solide #dedede; float: gauche; hauteur de ligne: 16px; marge droite: 10px; padding-right: 10px; 

Ensuite, je veux supprimer la bordure du dernier élément de la liste (dans les navigateurs qui la prennent en charge) et modifier l'affichage des liens:

ul # filtre li: dernier-enfant bordure-droite: aucun; marge droite: 0; Rembourrage à droite: 0;  ul # filtre a color: # 999; texte-décoration: aucun; 

Je veux aussi m'assurer et différencier la catégorie actuellement sélectionnée:

ul # filtre li.current a, ul # filtre a: hover text-decoration: underline;  ul # filtre li.current a color: # 333; poids de police: gras; 

Ok, maintenant que nous avons le style de navigation par catégorie, concentrons-nous sur la disposition réelle du portefeuille. Planifions de placer 3 éléments de liste côte à côte avec une bordure autour de chacun d'eux:

ul # portfolio float: left; style de liste: aucun; marge gauche: 0; largeur: 672px;  ul # portfolio li border: 1px solid #dedede; float: gauche; marge: 0 10px 10px 0; rembourrage: 5px; largeur: 202px; 

Maintenant, il suffit d’ajouter un style de base pour les images et les liens:

ul # portfolio a display: block; largeur: 100%;  ul # portfolio a: hover text-decoration: none;  ul # portfolio img border: 1px solid #dedede; bloc de visualisation; rembourrage en bas: 5px; 

Compensation pour Internet Explorer 6

Bien sûr, n'oublions pas notre ami IE6. Une fois que vous avez commencé à cliquer sur certains des filtres, la disposition devient un peu folle..

D'après ce que je peux dire, c'est le redoutable bug IE Double Margin. J'ai essayé de postuler affichage: en ligne aux éléments de la liste une fois qu’ils sont filtrés, mais cela ne semble pas avoir résolu le problème. Ma meilleure solution a donc été de diviser par deux la marge droite:

ul # portfolio li marge-droite: 5px; 

Nous ne servirons bien sûr que cette feuille de style spécifique à IE6 en utilisant des commentaires conditionnels:

Ouais, ça n'a pas l'air aussi bien, mais vous savez quoi: Je m'en fiche. Si vous utilisez IE6, vous le méritez bien.

4. Le jQuery

Ok, maintenant que le balisage et le CSS sont terminés, ne passons pas à la partie importante de ce tutoriel: le javascript.

Nous allons commencer par inclure la dernière version de jQuery dans la tête de notre document.

Ensuite, nous voulons exécuter notre code une fois le document chargé.

$ (document) .ready (fonction () );

Maintenant, nous ne voulons rien faire tant que l’une de nos catégories n’a pas été cliquée. Nous voulons également nous assurer que nous ne suivons pas la valeur href du lien, nous devons donc retourne faux:

$ ('ul # filter a'). click (function () return false;);

Après avoir cliqué sur un lien de catégorie, je souhaite effectuer plusieurs opérations: supprimer le contour du lien cliqué, supprimer la classe de courant sur l'élément de liste qui le contient et ajouter la classe de courant sur le parent du lien cliqué :

$ (this) .css ('contour', 'aucun'); $ ('ul # filter .current'). removeClass ('current'); $ (this) .parent (). addClass ('current');

Ensuite, nous voulons insérer le texte à l'intérieur du lien cliqué, le convertir en minuscule et remplacer les espaces par des traits d'union (comme auparavant lorsque nous avons créé les classes de catégories):

var filterVal = $ (this) .text (). toLowerCase (). replace (", '-');

Le premier cas du script est quand le Tout le lien est cliqué. Lorsque vous cliquez dessus, nous voulons afficher tous les éléments du portefeuille et supprimer la classe d'objets cachés:

if (filterVal == 'all') $ ('ul # portfolio li.hidden'). fadeIn ('slow'). removeClass ('hidden'); 

Sinon, une des catégories réelles a été cliquée. Nous souhaitons donc examiner chaque élément du portefeuille et vérifier si sa classe correspond à la valeur de la catégorie sur laquelle vous avez cliqué. Si ça ne fait pas avoir la classe, nous voulons faire disparaître l'élément de la liste et ajouter une classe de hidden. Ça ça Est-ce que avoir la classe, nous voulons le faire disparaître et supprimer la classe de hidden:

else $ ('ul # portfolio li'). each (function () if (! $ (this) .hasClass (filterVal)) $ (this) .fadeOut ('normal'). addClass ('hidden') ; else $ (this) .fadeIn ('slow'). removeClass ('hidden');); 

Le script fini

Jetons un coup d'oeil à tout le script:

$ (document) .ready (fonction () $ ('ul # filtre a'). cliquez sur (fonction () $ (this) .css ('contour', 'aucun')); $ ('ul # filtre. current '). removeClass (' current '); $ (this) .parent (). addClass (' current '); var filterVal = $ (this) .text (). toLowerCase (). replace (",' - ' if; (filterVal == 'all') $ ('ul # portfolio li.hidden'). fadeIn ('slow'). removeClass ('hidden'); else $ ('ul # portfolio li') .each (function () if (! $ (this) .hasClass (filterVal)) $ (this) .fadeOut ('normal'). addClass ('hidden'); else $ (this) .fadeIn ( 'slow'). removeClass ('hidden');); return false;););

Certaines personnes n’aimeront peut-être pas l’effet, mais je trouve assez cool de voir comment elles dansent. Ce n'est certainement pas la seule façon d'accomplir quelque chose comme ça, et on pourrait facilement l'utiliser pour faire d'autres choses..

Cette technique est en fait issue du codage que j'ai fait pour le portefeuille de mon entreprise..

5. Une note rapide

Vous avez peut-être remarqué que j'ajoutais et retirais la classe de caché sur les articles que je basculais la visibilité. Bien que je n’ai rien fait avec la classe, j’essaie de prendre l’habitude d’ajouter et de supprimer des classes pour indiquer l’état dans lequel elles se trouvent. Vous ne pouvez pas l’utiliser immédiatement, mais cela peut vous donner un accrochage. avec dans le futur.

• Abonnez-vous au flux RSS NETTUTS pour plus de commentaires et d'articles sur le développement Web au quotidien.