Creazione di un portafoglio Filtrabile con jQuery

Se hai lavorato nel tuo campo per un po ', ci sono buone probabilità di avere un portafoglio piuttosto ampio. Per renderlo un po 'più facile da navigare, probabilmente sarai tentato di suddividerli in diverse categorie. In questo tutorial, ti mostrerò come rendere "il filtraggio per categoria" un po 'più interessante con solo un po' di jQuery.

1. Il markup

Il nostro portafoglio non è altro che una semplice lista non ordinata:

 
Un elenco a parte
 
Mela
 
CNN
 
Digg
 
ESPN
 
Facebook
 
Google
 
Netflix
 
Nettuts
 
cinguettio
 
casa Bianca
 
Youtube
 

Nota: non ero affatto parte della creazione di questi meravigliosi siti; Li sto solo usando come esempi.

2. Categorizzazione del portafoglio

Daremo per scontato che il nostro portafoglio possa essere suddiviso in 5 categorie:

• Design
• Sviluppo
• CMS
• Integrazione
• Informazione architettura

Per utilizzare le categorie che abbiamo definito, le convertiremo in minuscolo e sostituiremo tutti gli spazi con trattini:

• Design = design
• Sviluppo = sviluppo
• CMS = cms
• Integrazione = integrazione
• Architettura dell'informazione = informazione architettura

Assumeremo che ciascun elemento del portfolio potrebbe essere in una o più categorie, quindi aggiungeremo le categorie appena create come classi agli elementi dell'elenco:

 
 Un elenco a parte 
 
 Mela 
 
 CNN 
 
 Digg 
 
 ESPN 
 
 Facebook 
 
 Google 
 
 Netflix 
 
 Nettuts 
 
 cinguettio 
 
 casa Bianca 
 
 Youtube 
 

Aggiunta della navigazione di categoria

Ora che abbiamo i pezzi del portfolio in atto, avremo bisogno di un modo per navigare attraverso di loro. Un altro elenco non ordinato dovrebbe fare:

 
Tutti
 
Design
 
Sviluppo
 
CMS
 
Integrazione
 
Informazione architettura
 

Dal momento che voglio la visualizzazione predefinita del portfolio da mostrare Tutti oggetti, ho assegnato una classe di attuale alla prima voce dell'elenco.

Probabilmente lo guarderai e mi interroghi sull'accessibilità di questo esempio. Il mio pensiero è che tu abbia 3 opzioni per risolvere questo problema.

1. Quando si crea un portafoglio come questo, c'è una forte probabilità che sarà guidato dal database. Pertanto, dovresti essere in grado di creare una pagina separata per ogni categoria. Quindi, se un utente non ha JavaScript abilitato, può andare alla pagina separata con il portafoglio filtrato.
2. Puoi usare una tecnica simile dal mio ultimo tutorial: impostare un parametro nell'URL.
3. Puoi sempre scrivere nella navigazione con JavaScript prima degli elementi del portfolio:

   $ (document) .ready (function () $ ('ul # portfolio'). before ('
   Tutti
   Design
   Sviluppo
   CMS
   Integrazione
   Informazione architettura
   '); );

Ok, hai i miei appunti sull'accessibilità, quindi non criticarmi per non pensarci.

3. Il CSS

Questo tutorial non è pensato per i CSS, quindi ho intenzione di scorrere il CSS abbastanza rapidamente.

Comincio sempre con alcuni stili di base come una sorta di framework, quindi non ho intenzione di andare oltre quegli stili in questo momento. Fondamentalmente questi stili funzionano come un reset e definiscono alcuni stili per gli elementi di base.

Per iniziare, voglio solo visualizzare le categorie in alto orizzontalmente con un bordo tra ciascuna:

ul # filter float: left; font-size: 16px; stile elenco: nessuno; margin-left: 0; larghezza: 100%;  ul # filter li border-right: 1px solid #dedede; fluttuare: a sinistra; altezza della linea: 16px; margin-right: 10px; padding-right: 10px; 

Successivamente, voglio rimuovere il bordo dall'ultima voce dell'elenco (nei browser che lo supportano) e cambiare la visualizzazione dei collegamenti:

ul # filter li: last-child border-right: none; margine-destra: 0; riempimento-destra: 0;  ul # filter a color: # 999; decorazione del testo: nessuna; 

Voglio anche assicurarmi e differenziare la categoria attualmente selezionata:

ul # filter li.current a, ul # filter a: hover text-decoration: underline;  ul # filter li.current a color: # 333; font-weight: bold; 

Ok, ora che abbiamo la categoria di navigazione in stile, concentriamoci sul layout attuale del portfolio. Pianifichiamo 3 voci di elenco una accanto all'altra con un bordo attorno a ciascuna:

ul # portfolio float: left; stile elenco: nessuno; margin-left: 0; larghezza: 672 px;  ul # portfolio li border: 1px solid #dedede; fluttuare: a sinistra; margine: 0 10px 10px 0; imbottitura: 5px; larghezza: 202 px; 

Ora, abbiamo solo bisogno di aggiungere alcuni stili di base per le immagini e i collegamenti:

ul # portfolio a display: block; larghezza: 100%;  ul # portfolio a: hover text-decoration: none;  ul # portfolio img border: 1px solid #dedede; blocco di visualizzazione; imbottitura-fondo: 5px; 

Compensazione per Internet Explorer 6

Certo, non dimentichiamoci del nostro amico IE6. Dopo aver iniziato a cliccare su alcuni filtri, il layout diventa un po 'pazzo.

Da quello che posso dire, è il temuto bug Double Margin di IE. Ho provato ad applicare display: in linea agli elementi dell'elenco una volta filtrati, ma non sembra che lo risolvano. Quindi la mia soluzione migliore era quella di dimezzare il margine giusto:

ul # portfolio li margin-right: 5px; 

Naturalmente, serviremo solo questo foglio di stile specifico per IE6 utilizzando i commenti condizionali:

Sì, non sembra buono, ma sai cosa: Non mi interessa. Se stai usando IE6, te lo meriti.

4. Il jQuery

Ok, ora che abbiamo il markup e il CSS tutto fatto, non prendiamo la parte importante di questo tutorial: il JavaScript.

Inizieremo includendo l'ultima versione di jQuery nella parte iniziale del nostro documento.

Successivamente, vogliamo eseguire il nostro codice una volta che il documento è stato caricato.

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

Ora, non vogliamo fare nulla finché non viene cliccata una delle nostre categorie. Vogliamo anche assicurarci di non seguire il valore href del link, quindi è necessario restituisce falso:

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

Una volta fatto clic su un collegamento di categoria, voglio fare un paio di cose: rimuovere la struttura sul link cliccato, rimuovere la classe di corrente sull'elemento di lista che lo ha, e aggiungere la classe di corrente sul genitore del link cliccato :

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

Successivamente, vogliamo ottenere il testo all'interno del link cliccato, convertirlo in minuscolo e sostituire qualsiasi spazio con trattini (proprio come prima quando stavamo creando le classi di categorie):

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

Il primo caso della sceneggiatura è quando il Tutti il collegamento è cliccato. Quando viene cliccato, vogliamo mostrare tutti gli elementi del portfolio e rimuovere la classe di hidden:

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

Altrimenti, è stata fatta clic su una delle categorie effettive. Quindi vogliamo esaminare ogni elemento del portfolio e verificare se ha la classe uguale al valore della categoria cliccata. Se è così non avere la classe, vogliamo svanire l'elemento della lista e aggiungere una classe di nascosto. Esso esso fa avere la classe, vogliamo sbiadirla e rimuovere la classe di hidden:

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

Lo script finito

Diamo un'occhiata all'intero script:

$ (document) .ready (function () $ ('ul # filter a'). click (function () $ (this) .css ('outline', 'none'); $ ('filtro ul #. 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;););

Ad alcune persone potrebbe non piacere l'effetto, ma penso che sia piuttosto interessante il modo in cui ballano tutti intorno. Questo non è sicuramente l'unico modo per realizzare qualcosa di simile, e potrebbe essere facilmente costruito per fare altre cose.

Questa tecnica è in realtà evoluta dalla codifica che ho fatto per il portafoglio della mia azienda.

5. Una nota rapida

Potresti aver notato che stavo aggiungendo e rimuovendo la classe di nascosto sugli oggetti mentre stavo modificando la visibilità. Mentre non ho finito di fare nulla con la classe, provo a prendere l'abitudine di aggiungere e rimuovere le classi per denotare lo stato in cui si trovano. Potresti non usarlo immediatamente, ma può fornire un gancio per te con in futuro.

• Iscriviti al feed RSS di NETTUTS per ulteriori tuts e articoli di sviluppo web giornalieri.