jQuery, 22 de plugin-uri interesante care merită încercate. Prezentăm cele mai bune plugin-uri pentru a economisi timp și efort chiar și în domeniul optimizare SEO.
Au existat zeci de mii de plugin-uri jQuery scrise pentru biblioteca jQuery. Creată în 2006 de John Resig, biblioteca jQuery este una dintre cele mai populare biblioteci JavaScript.
O varietate de soluții oferite de jQuery
Este o resursă fantastică pentru proiectarea și dezvoltarea rapidă a interacțiunilor cu utilizatorii. Poate fi o galerie de imagini sau un formular, o animație CSS care dezvăluie conținut sau un efect de explozie.
Biblioteca oferă elemente de bază pentru a vă permite realizarea de prototipuri rapide. În plus, oferă interfață unică de utilizator cu cod și efort minim.
Doar pentru că vă puteți crea propria soluție la orice problemă dată înseamnă că ar trebui să faceți acest lucru? Desigur că nu! Nu este necesar să reinventați roata de fiecare dată când doriți să creați funcționalitate comună.
Utilizați plugin-uri pentru a adăuga instantaneu un comportament. Dacă faceți acest lucru, veți economisi și mai mult timp și efort. Mai jos am pregătit lista noastră de plugin-uri jQuery foarte utile. Majoritatea sunt și gratis.
Acest plugin de asistență la chat vă permite să adăugați suport pentru conturi sociale nelimitate. Inclusiv WhatsApp, Messenger, Skype, Twitter, Telegram și Instagram.
Este ușor de configurat și puteți personaliza butoanele după cum doriți. Spre deosebire de majoritatea plugin-urilor din această listă, nu este gratuit și vă va costa 9 USD descărcarea.
2. Plugin-ul jQuery Player video RTO + P
Sigur, este ușor să încorporați videoclipuri de pe YouTube sau de oriunde. Dacă doriți un control mai mare asupra videoclipului dvs., atunci RTO + P Video Player este o necesitate.
E ușor să vă construiți și să vă personalizați propriul player video. Primește videoclipul fie de pe propriul server sau CDN, fie dintr-un flux public Vimeo.
Utilizați tag-ul video HTML5 pentru a vă face viața mai ușoară. Pentru performanță mai bună puteți utiliza opțiunea de „lazy load”.
3. Slick
Este acesta ultimul carusel de care aveți nevoie vreodată? Cu siguranță ar putea fi. Slick este un plugin jQuery care vă oferă carusele complet receptive, de aproape orice fel vă puteți dori.
Vine cu tot felul de opțiuni cu care să vă jucați. Inclusiv lazy load, redarea automată, apeluri și multe altele.
4. Plugin-ul jQuery Muuri
Pentru cele mai bune aspecte flexibile, Muuri de la Niklas Rämö merită o privire. Sistemul său de aspect vă permite să poziționați elementele de grilă de diverse dimensiuni.
Este un plugin receptiv, sortabil, filtrabil și glisabil. În mod implicit, va aranja totul într-un mod implicit, dar puteți adăuga propriul algoritm de aspect pentru un stil diferit.
5. Timeline.js
Acest plugin jQuery oferă o răsucire asupra componentei carusel. Timeline.js oferă tot ceea ce aveți nevoie pentru a crea o cronologie carusel (programare pe baza punctelor cronologice).
Include o mulțime de opțiuni de personalizare vizuale și funcționale.
6. Tilted page scroll
Acest plugin jQuery de la Pete R. este un mod excelent de a atrage atenția oamenilor. Odată instalat, elementele se vor înclina în vizualizare în timp ce se derulează pagina în sus.
Se vor înclina din nou în timp ce derulează din partea de sus a paginii. Este un efect frumos și ușor de implementat.
07. Plugin-ul jQuery Focuspoint
Web design receptiv înseamnă posibilitatea de a crea o singură pagină care să arate bine pe orice dispozitiv. Website-ul dvs. decupează automat imagini pentru a se potrivi anumitor ferestre? Poate pierde adesea punctul focal.
Cu Focuspoint, vă puteți asigura că imaginea arată excelent în orice situație. Specifică un punct focal pentru fiecare imagine, iar plugin-ul va tăia părțile nedorite.
8. SVGMagic
Utilizarea imaginilor SVG este o idee bună, deoarece acestea vor fi clare la orice dimensiune. Acest plugin vă ajută fără să vă faceți griji cu privire la browserele incompatibile.
Se caută imagini SVG și se înlocuiesc cu versiuni PNG dacă SVG nu este acceptat.
9. Plugin jQuery Face Detection
Detectați și obțineți coordonatele fețelor în imagini sau videoclipuri cu acest plugin. A fost scris de Jay Salvat și utilizează algoritmul Liu Liu de detectare a feței.
10. Round Slider
Acest plugin jQuery permite utilizatorului să selecteze o gamă de valori prin trecerea mouse-ului peste cerc. Varianta completă este setarea implicită.
Îl puteți utiliza și pentru a obține forme de sfert de cerc sau jumătate de cerc. Există stiluri CSS pe care le puteți regla în diferite moduri, de exemplu, pentru a arăta ca un vitezometru. Nu sunt implicate imagini. Totul e realizat cu CSS și JavaScript.
11. Plugin-ul jQuery jInvertScroll
jInvertscroll face mai ușoară implementarea defilării orizontale cu efect de paralaxă. Rulați rotița de defilare pe website-ul lor de demonstrație. Două straturi de peisaj se mișcă la viteze diferite pentru a crea o iluzie de adâncime.
12. Slinky
Slinky este un design de meniu elegant, atemporal și util pentru orice scenariu în care aveți multe submeniuri. Selectați un element și o animație glisează submeniul.
13. TwentyTwenty
Nu mai trebuie să plasați două imagini una lângă alta pentru a arăta diferențele dintre ele. Puteți utiliza acest plugin care plasează pozele unele peste altele.
Utilizatorii trag de un glisor astfel încât imaginea de sub să fie afișată. Le permite să vadă ce s-a schimbat într-o situație de „before and after”.
14. Afișare ierarhică de proiectare a materialelor
Efectele ierarhice de animație ale afișajului pot fi folosite pentru a îndruma atenția utilizatorilor. Aceștia pot fi conduși de la un punct la altul într-un proces.
Această animație poate fi personalizată în funcție de design-ul dvs. Are o documentație excelentă care vă poate ajuta.
15. Plugin-ul jQuery Tabslet
După cum sugerează și numele, Tabslet este un plugin ușor pentru realizarea de file. Acceptă controalele următoare și anterioare, rotația, evenimentele personalizate și conectarea profundă. Există multe alte funcționalități utile.
16. nanogalerie2
Plugin-ul jQuery „nanogallery2” e conceput pentru a vă simplifica galeriile de imagini. Oferă navigare pe mai multe niveluri în albume, casetă lightbox sau efecte de comutare pe miniaturi.
Instrumentul oferă o prezentare de diapozitive, ecran complet, paginare și lazy load a imaginii. Este tactil, receptiv, rapid și acceptă stocarea în cloud.
Versiunea 2 oferă o experiență îmbunătățită a utilizatorului și funcții noi. De exemplu, filtrarea după cuvinte cheie, un coș de cumpărături sau distribuirea pe social media.
Sunt prezente efecte avansate de trecere sau tranziții pentru afișarea miniaturilor. O pagină de informații cu locația în Google Maps și multe altele așteaptă să fie descoperite de dvs.
17. Tooltipster
Tooltipster este o abordare modernă a instrumentului clasic tool-tip. Vă permite să prezentați sfaturi de instrumente complet compatibile HTML în marcaj semantic cu CSS. În acest mod, puteți controla afișajul.
Există o gamă largă de opțiuni de configurare, făcându-l personalizabil pentru orice scenariu.
18. Magnific Popup
Acesta este un plugin lightbox pentru jQuery care se concentrează pe a fi cât mai ușor și compatibil. Dezvoltatorul s-a concentrat pe performanța și experiența utilizatorului.
Nu are toate caracteristicile plugin-urilor lightbox alternative. Cu toate acestea, e foarte rapid și funcționează perfect pe o gamă largă de dispozitive. Inclusiv dispozitive High-DPI (Retina) MacBook Pro.
19. jQuery Knob
jQuery Knob preia elementele de intrare și le convertește în cadrane tactile care funcționează și pe desktop. Acesta e un exemplu excelent al modului în care vă puteți adapta conținutul pentru a se potrivi noilor paradigme.
Merită să căutați abordarea tehnică, dacă nu altceva.
20. Typeahead.js
Produsul echipei de dezvoltare Twitter, Type Ahead este un instrument ușor de implementat. Trage dintr-o sursă de date locală sau externă pe măsură ce utilizatorul dvs. ajunge într-o casetă de intrare.
Oferă sugestii de completare automată pe măsură ce parcurg etapele.
21. Lettering.js
Lettering.js oferă control granular asupra caracterelor individuale. Vă permite să aplicați kerning, să colorați literele individuale și să aplicați event-listeners.
De asemenea, este compatibil cu FitText (de mai jos). Oferă control stilului desktop-ului asupra tiparului, rămânând totuși receptiv.
22. FitText
Acest plugin la îndemână vă permite să completați lățimea cu tipul dvs. Se poate scala automat dimensiunea textului în sus sau în jos pentru a se potrivi.
A fost conceput pentru a facilita titlurile receptive. Plugin-ul se integrează cu Lettering.js pentru a permite stilizarea granulară pe caractere.