Een filterbare portfolio maken met jQuery

Als je een tijdje in je vak hebt gewerkt, is de kans heel groot dat je een vrij uitgebreide portfolio hebt. Om het een beetje makkelijker te maken om te navigeren, zult u waarschijnlijk in de verleiding komen om ze in verschillende categorieën te verdelen. In deze tutorial laat ik je zien hoe je "filteren op categorie" een beetje interessanter maakt met slechts een klein beetje jQuery.

1. De markup

Onze portfolio is niets meer dan een eenvoudige, ongeordende lijst:

 
Een lijst uit elkaar
 
appel
 
CNN
 
Digg
 
ESPN
 
Facebook
 
Google
 
Netflix
 
NETTUTS
 
tjilpen
 
witte Huis
 
YouTube
 

Opmerking: ik was geenszins een deel van het creëren van deze prachtige sites; Ik gebruik ze alleen als voorbeelden.

2. Categoriseren van de portfolio

We gaan ervan uit dat onze portfolio kan worden onderverdeeld in 5 categorieën:

• Ontwerp
• Ontwikkeling
• CMS
• integratie
• Informatie-architectuur

Om de door ons gedefinieerde categorieën te gebruiken, zullen we ze converteren naar kleine letters en alle spaties vervangen door koppeltekens:

• Ontwerp = ontwerp
• Ontwikkeling = ontwikkeling
• CMS = cms
• Integratie = integratie
• Informatie-architectuur = informatie-architectuur

We gaan ervan uit dat elk portfolio-item in een of meerdere categorieën kan staan, dus we gaan willekeurig onze nieuw gemaakte categorieën toevoegen als klassen aan de lijstitems:

 
 Een lijst uit elkaar 
 
 appel 
 
 CNN 
 
 Digg 
 
 ESPN 
 
 Facebook 
 
 Google 
 
 Netflix 
 
 NETTUTS 
 
 tjilpen 
 
 witte Huis 
 
 YouTube 
 

Categorie Navigatie toevoegen

Nu we de portfolio-onderdelen op hun plaats hebben, hebben we een manier nodig om er doorheen te navigeren. Een andere ongeordende lijst zou moeten doen:

 
Allemaal
 
Ontwerp
 
Ontwikkeling
 
CMS
 
integratie
 
Informatie-architectuur
 

Omdat ik wil dat de standaardweergave van de portfolio wordt weergegeven Allemaal items, ik heb een klasse van toegewezen stroom naar het eerste lijstitem.

Je zult daar waarschijnlijk naar kijken en me ondervragen over de toegankelijkheid van dit voorbeeld. Mijn idee is dat je 3 opties hebt om dat probleem op te lossen.

1. Bij het maken van een dergelijke portfolio is de kans groot dat deze door de database wordt aangestuurd. U zou dus in staat moeten zijn om voor elke categorie een aparte pagina te maken. Dus als een gebruiker JavaScript niet heeft ingeschakeld, kunnen ze naar de afzonderlijke pagina gaan met de gefilterde portfolio.
2. U kunt een vergelijkbare techniek uit mijn laatste zelfstudie gebruiken: een parameter instellen in de URL.
3. Je kunt altijd gewoon in de navigatie schrijven met JavaScript vóór de portfolio-items:

   $ (document) .ready (function () $ ('ul # portfolio'). before ('
   Allemaal
   Ontwerp
   Ontwikkeling
   CMS
   integratie
   Informatie-architectuur
   '); );

Ok, je hebt mijn aantekeningen over toegankelijkheid, dus bekritiseer me niet omdat ik er niet aan denk.

3. De CSS

Het is niet de bedoeling dat deze tutorial over CSS gaat, dus ik zal de CSS vrij snel doornemen.

Ik begin altijd met een aantal basisstijlen als een soort raamwerk, dus ik ga nu niet over die stijlen gaan. Deze stijlen fungeren in feite gewoon als een reset en definiëren een styling voor basiselementen.

Om te beginnen wil ik de categorieën horizontaal horizontaal weergeven met een rand ertussen:

ul # filter float: links; lettergrootte: 16px; lijststijl: geen; marge links: 0; breedte: 100%;  ul # filter li border-right: 1px solid #dedede; zweven: links; regelhoogte: 16px; margin-right: 10px; opvulling rechts: 10px; 

Vervolgens wil ik de rand verwijderen uit het laatste lijstitem (in browsers die dit ondersteunen) en de weergave van de koppelingen wijzigen:

ul # filter li: last-child border-right: none; marge-rechts: 0; opvulling rechts: 0;  ul # filter a color: # 999; tekstdecoratie: geen; 

Ik wil ook zeker weten en de huidige geselecteerde categorie onderscheiden:

ul # filter li.current a, ul # filter a: hover text-decoration: onderstrepen;  ul # filter li.current a color: # 333; lettertype: vet; 

Oké, nu we de categorie navigatie gestileerd hebben, laten we ons concentreren op de daadwerkelijke lay-out van de portfolio. Laten we van plan zijn om 3 lijstitems naast elkaar te drijven met een rand er omheen:

ul # portfolio float: left; lijststijl: geen; marge links: 0; breedte: 672 px;  ul # portfolio li border: 1px solid #dedede; zweven: links; marge: 0 10px 10px 0; opvulling: 5px; breedte: 202 px; 

Nu moeten we gewoon wat basisstyling toevoegen voor de afbeeldingen en koppelingen:

ul # portfolio a display: block; breedte: 100%;  ul # portfolio a: hover text-decoration: none;  ul # portfolio img border: 1px solid #dedede; weergave: blok; padding-bottom: 5px; 

Compensatie voor Internet Explorer 6

Vergeet natuurlijk onze vriend IE6 niet. Als je eenmaal door een aantal filters hebt geklikt, wordt de lay-out een beetje gek.

Van wat ik kan vertellen, is het de gevreesde IE Double Margin bug. Ik heb geprobeerd te solliciteren weergeven: inline naar de lijstitems zodra ze zijn gefilterd, maar dat leek het niet te repareren. Dus mijn beste oplossing was om gewoon de juiste marge te halveren:

ul # portfolio li margin-right: 5px; 

We gaan deze IE6-specifieke stylesheet natuurlijk alleen gebruiken met voorwaardelijke opmerkingen:

Ja, het ziet er niet zo goed uit, maar je weet wat: Kan me niet schelen. Als u IE6 gebruikt, verdient u het.

4. Het jQuery

Ok, nu dat we de markup en CSS allemaal gedaan hebben, komen we niet bij het belangrijke deel van deze tutorial: JavaScript.

We beginnen met het toevoegen van de nieuwste versie van jQuery in het hoofd van ons document.

Vervolgens willen we onze code uitvoeren zodra het document is geladen.

$ (document) .ready (function () );

Nu willen we niets doen totdat op een van onze categorieën is geklikt. We willen er ook voor zorgen dat we de href-waarde van de link niet volgen, dus dat moeten we doen return false:

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

Als er op een categorielink wordt geklikt, wil ik een aantal dingen doen: de omtrek van de aangeklinkte link verwijderen, de actieklasse van het lijstitem verwijderen en de class van current toevoegen aan het bovenliggende element van de aangeklikte link :

$ (This) .css ( 'outline', 'none'); $ ('ul # filter .current'). removeClass ('current'); $ (This) .parent () addClass ( 'stroom.');

Vervolgens willen we de tekst binnen de geklikte link krijgen, naar kleine letters converteren en spaties vervangen door koppeltekens (net als voorheen toen we de categorieklassen maakten):

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

Het eerste geval van het script is wanneer het Allemaal link wordt geklikt. Wanneer erop wordt geklikt, willen we alle portfolio-items weergeven en de klasse verborgen verwijderen:

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

Anders is op een van de feitelijke categorieën geklikt. We willen dus elk portfolio-item doornemen en controleren of het de klasse heeft die gelijk is aan de waarde van de categorie waarop is geklikt. Als het doet niet Als je de klas hebt, willen we het lijstitem vervagen en een klasse verborgen toevoegen. Het is het doet hebben de klas, we willen het laten vervagen en de klasse van verborgen verwijderen:

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

Het voltooide script

Laten we het hele script bekijken:

$ (document) .ready (function () $ ('ul # filter a'). klik (functie () $ (this) .css ('outline', 'none'); $ ('ul # filter. current '). removeClass (' current '); $ (this) .parent (). addClass (' current '); var filterVal = $ (this) .text (). toLowerCase (). replace (",' - ' ); if (filterVal == 'all') $ ('ul # portfolio li.hidden'). fadeIn ('langzaam'). removeClass ('hidden'); else $ ('ul # portfolio li') .each (function () if (! $ (this) .hasClass (filterVal)) $ (this) .fadeOut ('normal'). addClass ('hidden'); else $ (this) .fadeIn ( 'langzaam'). removeClass ('hidden');); return false;););

Sommige mensen vinden het effect misschien niet leuk, maar ik vind dat het er best cool uitziet hoe ze allemaal rond dansen. Dit is zeker niet de enige manier om zoiets te bereiken, en het kan gemakkelijk worden gebouwd om andere dingen te doen.

Deze techniek is eigenlijk geëvolueerd van de codering die ik heb gedaan voor de portfolio van mijn bedrijf.

5. Een snelle opmerking

Je hebt misschien gemerkt dat ik de klasse van toe te voegen en te verwijderen verborgen op de items terwijl ik de zichtbaarheid wisselde. Hoewel ik uiteindelijk niets met de klas heb gedaan, probeer ik er een gewoonte van te maken om klassen toe te voegen en te verwijderen om de staat aan te duiden waarin ze zich bevinden. Je mag het niet meteen gebruiken, maar het kan een houvast bieden voor je dingen met in de toekomst.

• Abonneer u op de NETTUTS RSS-feed voor meer dagelijkse webontwikkelingen, tuts en artikelen.