Accentsconagua

Filtrare rapidă și ușoară cu jQuery

Cod
Share

În săptămâna asta screencast, vom învăța cum să implementăm filtrarea rapidă și murdară fără o bază de date. Aplicând câteva clase și o atingere de jQuery, putem implementa foarte repede un sistem mic.


Prezentare generală

Doar ieri am fost întrebat cum am reușit să creez caracteristica simplă de sortare găsită pe pagina Vault a blogului meu. Adevărat, a fost făcută din grabă. Deși în cele din urmă voi executa totul printr-o bază de date și o voi sorta în acest fel, pentru moment aveam nevoie de un mod rapid și murdar de a face acest lucru cu JavaScript. Îți arăt ce am făcut.



Tutorial video de 20 de minute

Alte opțiuni de vizualizare

  • Descărcați videoclipul
  • Versiunea iTunes

Final jQuery

S-a actualizat puțin videoclipul.

 var ulOptions = '
  • Toate
  • PHP
  • CSS
  • JavaScript
  • HTML
„; var $ links = $ ('# link-uri'); $ links.before (ulOptions) .children ('li') .addClass ('toate') .filter ('li: odd') .addClass ('odd'); $ ('# opțiuni li a') faceți clic pe (funcția () var $ this = $ (this), type = $ this.attr ('class'); $ links.children (' unic ') .hide () .filter ('. 'tip) .show () .filter (': odd ') .addClass (' odd ');

Actualizare: Bug de momeală mică

"SFdude" a găsit un bug în cazul în care, dacă faceți clic pe același element de două ori, întreaga listă va dispărea! Din fericire, am reușit să determin rapid problema. Problema a fost că, după primul clic, am aplicat o clasă de "selectat" etichetei de ancorare. Asta a fost cauza hicupului. Pentru că acum - avea două clase care nu corespundeau nimic! Remedierea este de a elimina aceste două linii:

 $ ('# opțiuni li a'). removeClass ('selectat'); $ This.addClass ( 'selectat');

Adevărat - erau inutile. Putem la fel de ușor să folosim selectorul a: focus în foaia de stil pentru a realiza acest lucru. :) 

 a: focalizare font-weight: bold;

Și asta face. Am actualizat demo-ul și codul sursă. Mulțumită lui SFdude pentru că a găsit o mică eroare masivă.

Deci, care sunt gândurile tale? Nu sunteți de acord cu această metodă? Există o modalitate mai bună de a face acest lucru - fără o bază de date? Să-mi dai de veste!

Mulțumesc, Screencast.com!



... pentru furnizarea de hosting pentru aceste tutoriale video.
  • Urmăriți-ne pe Twitter sau abonați-vă la RSS Nettuts + pentru mai multe tutori și articole de coaching zilnic.


Cod
×