30+ inovativni novi jQuery dodaci
Mnogi web programeri skaču u more projekata otvorenog koda. Novi dodaci i okviri objavljuju se gotovo svakodnevno. A kad ste zauzeti na poslu, može biti teško pratiti sva najnovija izdanja.
U ovom sam izlogu sastavio preko 30 različitih jQuery dodataka koje vrijedi spomenuti svim web programerima. Razvijanje sučelja web stranice može biti naporno i svakako zahtijeva pažljivu preciznost. Razvijanje na vrhu bilo kojeg otvorenog koda projekta znači da ne izumite kotač. Osim toga, niste jedini koji je hodao u kodu. Budući da je jQuery jedna od najstabilnijih dostupnih JavaScript biblioteka, ovi dodaci često rade zajedno s njima da pruže besprijekorno korisničko iskustvo.
Istražite dizajnerske resurse
Odgovarajući dodirni audio uređaj
Ovaj responzivni audio uređaj savršen je primjer jQueryja na poslu. Jednostavno uvrstite kodove dodataka i stvorite bilo koji tipični HTML5 audio element. To će se automatski pretvoriti u audio uređaj osjetljiv na dodir s blistavim CSS3 korisničkim sučeljem.
Sidr
Siguran sam da obilje dizajnera i programera prepoznaje klizni bočni izbornik. Ovo se populariziralo iz iOS mobilnih aplikacija pomoću kliznih gumba izbornika na alatnoj traci. A sada se ovaj efekt može preslikati na web stranice koje koriste samo jQuery i Sidr dodatak. Pogledajte live demonstraciju i pogledajte kako bi to moglo funkcionirati u vašim vlastitim projektima.
Imageloader
Sjećate li se da ste vidjeli sve te dodatke za slikovne slike? Postoji toliko mnogo različitih opcija, a čak su objavljeni i neki besplatni dodaci otvorenog koda za WordPress. Ovaj dodatak za učitavanje slika slijedi mnogo ljepši primjer sa učitavanjem svih slika u slijedu, slijedeći efekt blijeđenja. Demonstracija uživo sjajan je primjer kako to možete primijeniti na svoju web stranicu.
uzoraka
Iako swatchevi možda nemaju praktičnu upotrebu u mnogim izgledima web stranica, to je divan jQuery dodatak za igranje s određenim bojama. Ovaj će dodatak stvoriti div područje pomoću palete srodnih boja na temelju vašeg unosa. Generiranje vlastite sheme boja može biti teško i ovo je jedinstven alat otvorenog koda za posao.
Vruće na Facebooku
Hot na Facebooku prilično je nejasna ideja. No dodatak djeluje savršeno u svim preglednicima koji su u skladu sa standardima, pa za one koji uživaju u dijeljenju Facebooka ovo je za vas! Hot na Facebooku uzet će URL i provjeriti ukupan broj FB dionica. Tada će se na stranici prikazati kao značka za dijeljenje društvenih medija.
Toolbar.js
Open Source Toolbar.js skriptu je prilično lako pokrenuti, ali ima svoja ograničenja. Ovaj će dodatak stvoriti mali izbornik s porukama veza ikona koji se pojavljuje na bilo kojem elementu koji odaberete. Može biti neizmjerno moćan u kombinaciji s korisničkim profilom ili drugim ikono-naredbenim sučeljem. Međutim, efekt je priličan, pa se nemojte iznenaditi ako vam je teško to uklopiti u svoj izgled.
jQuery PowerTip
Što se tiče rukovanja redovnim lebdećim alatima, možete razmotriti jQuery PowerTip. Ovo je prilično novi dodatak izdan kao open source na Githubu. Možete pogledati aktivni demo prikaz da biste vidjeli bolji primjer, ali najjednostavnije objašnjenje je stvaranje padajućih izbornika s alatima kada se pokažete iznad miša nad nekim elementom HTML-a.
jqTimeline
Dodatak jQtimeline nudi vrlo jedinstvene funkcionalnosti koje nikad prije nisam vidio. Možete izgraditi horizontalnu vremensku traku s postavkom događaja na cijelom popisu. Na taj način korisnici mogu kliknuti na događaj da bi prikazali više informacija. Svakako ima svoju praktičnu upotrebu, ali trebat će malo prilagođenog koda da bi ispravno radio.
Swipebox
Dodatak Swipebox mobilna je galerija slika jQuery. Ovo je posebno dizajnirano za mobilne web stranice i web stranice koje su prilagođene pametnim telefonima i tabletima. Galerija slika zauzet će cijeli zaslon, a možete i dodirivati prstom između ostalih slika u prezentaciji.
MixItUp
MixItUp ima puno različitih prilagođenih opcija i rekao bih da je to bliže intermedijarnom jQuery dodatku. Morat ćete razumjeti nekoliko koncepata prilikom prilagođavanja zadanih postavki i dodavanja ove stranice. Ali to će omogućiti brzo razvrstavanje elemenata unutar postavljene galerije poput predmeta iz portfelja, slika, fotografija i puno više.
jQuery Provjera pravopisa
Dizajneri koji su upoznati s provjerom pravopisa u pregledniku možda su obožavatelji ili ga mogu potpuno mrziti. Ovaj dodatak jQuery nudi drugačije rješenje u kojem možete urediti funkciju povratnog poziva za prikaz povezanih vokabulara. Riječ je o odvažnom dodatku koji je potpuno besplatan za korištenje, ali također zahtijeva malo prilagodbe da bi ispravno radio.
Pomicanje gore
ScrollUp je u mojih top 5 novih najdražih dodataka upravo zbog njegove jednostavnosti uporabe i unaprijed izgrađenih stilova. Jednostavno uključite JS datoteke na svoju web stranicu i podesite udaljenost pomaka od vrha. Nakon što se posjetitelj pomakne preko tog ograničenja, u donjem kutu pojavit će se mali fiksni div. Izvrsna je alternativa kodiranju vlastitog gumba ispočetka.
Validacija sučelja
Nod je čep za potvrdu sučelja za HTML unose u obrasce. Korištenjem jQuery možete postaviti stvarnu osnovu za podatke koji se smatraju dobrim i lošim podacima, a zatim provjerite ove vrijednosti nakon što korisnik preda obrazac. Neće proći sve dok svi kriteriji nisu ispunjeni.
Select2
Birajući padajući izbornici uvijek su bili zaglavljeni u njihovim CSS stilovima. Postoji nekoliko internetskih postova koji uskaču u prilagođavanje vlastitog odabranog izbornika, ali često nisu podržani od strane svih preglednika. Ovaj dodatak jQuery Select2 poboljšano je za tipično polje za odabir HTML-a. U svoj naziv stavite samo dodatak, a svi odabrani izbornici mogu se ažurirati s malo koda.
Tooltipster
Pored ostalih sjajnih dodataka jQuery tooltip, moram preporučiti Tooltipster za njihovu alternativnu šifru. Koristio sam Tooltipster u nekoliko projekata i djeluje onako kako je opisano. Mnoge su opcije tako jednostavne za implementaciju, a to omogućuje programerima da prilagode svoje vlastite savjete sa samo nekoliko CSS svojstava.
Vrtlog
Ovaj neobični dodatak u obliku karlice omogućuje vam stvaranje dinamične rotirajuće ploče elemenata. Dodatak jQuery Vortex prilično je nov i još uvijek se redovito primjenjuju ažuriranja. Međutim mislim da je vrijedno spomena jer tehnike i dalje nisu toliko uobičajene kao što biste mogli očekivati.
provjerio sam
iCheck je jedan od najboljih jQuery dodataka koje sam ikad pronašao za ažuriranje vaših polja za unos. Ako odaberete odgovarajući stil kože i boje, potvrdni okviri i radio gumbi dobit će potpuno novi izgled. Priznat ću da se iCheck u početku malo zavarava s toliko zbunjujućih opcija. Ali što više vježbate, lakše ćete dobiti ovaj dodatak uključiti u svoje web mjesto.
Bilo koji Scroller s popisom
ALS ili Any List Scroller tipičan je jQuery dodatak za dijaprojekcije slika. No umjesto da se slike prikazuju u većem prikazu, one se zakreću kao tipični spremnici za pomicanje predmeta na početnoj stranici. Postoje opcije za uključivanje strelica s obje strane i dopuštanje posjetiteljima da ručno prelaze između unutarnjih elemenata.
Tumbo
Tumbo je prilično rudimentarni dodatak za brzo prikazivanje feeda s vašeg Tumblr bloga. Ovo se može ažurirati za prikaz sadržaja s bilo kojeg Tumblr bloga samo pomoću URL-a poddomene. Očito neće svi imati potrebu za tim, ali dobro je znati da programeri rade svoj put kroz API-je poput Tumblr ugrađenih u JavaScript dodatke.
Spectragram
Govoreći o API-jevima - ovaj dodatak Spectragram brz je način pristupa fotografijama s Instagrama. Jednostavno uključite JS datoteke u svoje zaglavlje, a zatim odredite korisnika ili upit za pretraživanje. Dodatak Spectragram povući će sve povezane rezultate i povezati se s izvornom snimkom.
jQuery Stripe
Dodatak jQuery Stripe nudi tradicionalniju galeriju slika. Svaka će se fotografija prikazati samo kao mali okomiti klizač koji možete kliknuti da biste prikazali cijelu sliku. Postoje i strelice na desnoj i lijevoj strani za promjenu između prikaza. Ne mislim da je to najbolja opcija, ali može biti izvanredno rješenje za netipične izgled web stranica.
SocialCount
SocialCount obrađuje još jednu neobičnu značajku koja dobiva puno zahtjeva. Ovaj dodatak omogućit će vam da brzo izvučete brojeve za dijeljenje Twittera, Facebooka i Google+. Samo unesite ciljni URL i možete prikazati značke društvenih medija bilo gdje na svojoj web stranici.
Prilagođeni dodatak za pomicanje
jQuery Custom Scrollbar je fascinantan dodatak koji zaslužuje puno pažnje. Ovo je internet već duže vrijeme, ali efekti i dalje ne prestaju zadiviti. Pomoću ovih prilagođenih traka za pomicanje možete brzo napraviti element div s funkcijom overscroll. Savršeno je za rukovanje prilagođenim sadržajem koji ne bi trebao zauzeti cjelokupni izgled.
Smallipop
Smallipop je još jedan lijepi dodatak jQuery tooltips. Trebali biste pogledati neke primjere da biste vidjeli kako će se to provoditi. Svaki dodatak s alatima slijedi svoja pravila i mogu se slagati sa svima. Ali mislim da je Smallipop odličan izbor za programere koji započinju s JavaScript knjižnicama.
jPanelMenu
jPanelMenu je još jedan popularan jQuery dodatak za korištenje klizne navigacije. Možete brzo uključiti ove kodove na svoju web stranicu kako biste dodali efekte na bilo kojoj stranici. Samo usmjerite element otvaranja / zatvaranja i kad god korisnik klikne, prikazat će vašu skrivenu navigaciju. Zavirite u demonstraciju uživo da biste vidjeli ovaj učinak u akciji.
Intro.js
Intro.js je dodatak za vođenje obilaska za jQuery. Postoji puno opcija i prilagođenih postavki koje možete odabrati, ali to također omogućuje jedinstvenije performanse web stranica. Mislim da je Intro.js najbolji dodatak jQuery za stvaranje vođene turneje po web mjestu. CSS je lako podmiriv i možete demonstrirati sa svim vrstama različitih izgleda.
Lightbox_me
Popis zaslona i okvira s lampicama strašno je porastao od 2011. Mislim da je jQuery dodatak Lightbox_me još jedan lijepi primjer ove značajke. Slike, obrasce, videozapise i drugi HTML možete postaviti izravno unutar modalnog okvira. JS kodove je lako naučiti, a dodatak ne zahtijeva čitav gomilu prilagođenih uređivanja.
jQuery karusel
Mislim da je abitgone jQuery Carousel definitivno neobična opcija. To će prikazati prethodne / sljedeće veze desno unutar slikovnog enkapsuliranja svih ostalih slika. Izgleda lijepo u manjim prostorima i možete promijeniti veličinu primjera na sve što vam treba. Osjećam da vrijedi razmisliti, ali možda vam se ne čini kao omiljena opcija.
Superbox
Jeste li upoznati kako Google Images trenutno prikazuje rezultate? Tako funkcionira jQuery Superbox koristeći vlastite statičke slike. Posjetitelji imaju mogućnost pregledavanja sličica, a kad kliknu, otvorit će se novi div s potpunom slikom. Doista mi se sviđa ovaj dodatak jer korisničko iskustvo oponaša Google vrlo pomno. A kako su ljudi već upoznati s Googleom, on omogućuje besprijekornu razmjenu podataka bez velike zbrke.
KGallery
KGallery je još jedna prekrasna galerija slika jQuery s prikazom prezentacija. Zadane ikone nisu trajne i očito možete ažurirati ostale bitove korisničkog sučelja. Ono što zaista privlači moju pažnju je mogućnost da u dizajn galerije uvrstim manje sličice. Podešavanje je prilično jednostavnog dodatka i preporučio bih vam da testirate demo verziju uživo kako biste vidjeli kako se osjećate oko implementacije.
jQuery Litelighter
U posljednjih nekoliko godina objavljeno je mnoštvo odličnih istaknutih sintaksa. Ali jQuery Litelighter je još jedan dodatak koji stvarno cijenim zbog jednostavnosti i graciozne prirode. Možete generirati istaknutu sintaksu za gotovo bilo koji popularni jezik, a to bi trebao raditi koristeći bilo koji od najčešćih web preglednika.
bxSlider
bxSlider jednostavno ima jedno od najboljih korisničkih iskustava za prezentaciju slika. Ovo pravo možete implementirati na svoju početnu stranicu ili na bilo koju drugu stranicu web mjesta. Korisnicima koji su upoznati sa značajkama prezentacije slika pružit će čvrst dizajn. Također jQuery kodovi vrlo su minimalistički i ne obrušavaju web mjesto tijekom dugog vremena učitavanja.
MeanMenu
MeanMenu dodatak je novije izdanje i svakako ga valja pogledati. Jako mi se sviđa kako će se zadani dizajn navigacije automatski promijeniti veličinom na temelju ukupnog broja internih veza. Također možete uključiti veze u podizborniku koji posjetiteljima nude brži pregled vašeg nav izbornika. Dizajn nije sjajan izbor za sve, ali je čvrst dodatak i može se pokazati korisnim na nekim projektima na web stranici.
