30+ uuenduslikku uut jQuery pistikprogrammi
Paljud veebiarendajad hüppavad avatud lähtekoodiga projektide merre. Uusi pluginaid ja raamistikke antakse välja peaaegu iga päev. Ja kui olete hõivatud tööl, võib olla raske kõigi uusimate väljaannetega sammu pidada.
Sellesse vitriini olen kokku pannud üle 30 erineva jQuery plugina, mida tasub mainida kõigile veebiarendajatele. Veebisaidi liidese arendamine võib olla keeruline ja nõuab kindlasti hoolikat täpsust. Mis tahes avatud lähtekoodiga projekti peal arendamine tähendab, et te ei leiuta ratast uuesti. Lisaks pole te ainus, kes on koodist vigu püüdnud. Ja kuna jQuery on üks stabiilsematest JavaScripti teekidest, töötavad need pistikprogrammid sageli käsikäes, et pakkuda tõrgeteta kasutajakogemust.
Tutvuge disainiressurssidega
Vastuvõtlik puutetundlik helipleier
See tundlik helimängija on tööl kasutatava jQuery suurepärane näide. Kaasate lihtsalt plugina koodid ja loote mis tahes tüüpilise HTML5 helielemendi. See teisendatakse automaatselt pimestava CSS3 kasutajaliidesega puutesõbralikuks helipleieriks.
Sidr
Olen kindel, et paljud disainerid ja arendajad tunnevad libisevat külgmenüüd ära. Seda populariseeriti iOS-i mobiilirakenduste kaudu, kasutades tööriistariba menüü libistatavaid nuppe. Ja nüüd võib seda efekti korrata veebisaitidel, mis kasutavad ainult jQuery ja Sidrni pistikprogrammi. Vaadake reaalajas demo ja vaadake, kuidas see saaks teie enda projektides toimida.
Pildilaadija
Kas mäletate, kuidas nägite kõiki neid lazyloadi pistikprogramme? Erinevaid võimalusi on nii palju ja isegi mõned tasuta avatud lähtekoodiga WordPressi pistikprogrammid on välja antud. See konkreetne pildilaaduri pistikprogramm järgib palju kenamat näidet, kus kõik pildid laaditakse järjestuses järjestuses pärast hääbumisefekti. Otsedemo on hea näide selle kohta, kuidas saate seda oma veebisaidile rakendada.
Proovipildid
Ehkki Swatches ei pruugi paljudes veebisaidi paigutustes praktilist kasu olla, on see imeline jQuery plugin konkreetsete värvidega mängimiseks. See pistikprogramm loob sisestusvaliku põhjal jagamisala, kasutades seotud värvide paletti. Enda värvilahenduse loomine võib olla keeruline ja see on selle töö jaoks ainulaadne avatud lähtekoodiga tööriist.
Kuumad Facebookis
Kuum Facebookis on üsna varjatud idee. Kuid pistikprogramm töötab suurepäraselt kõigis standarditele vastavates brauserites, nii et neile, kellele meeldib Facebooki jagamine, see on teie jaoks! Kuumad Facebookis võtavad URL-i ja kontrollivad FB aktsiate koguarvu. Siis kuvatakse see lehel sotsiaalmeedia jagamismärgina.
Tööriistariba.js
Skripti Toolbar.js avatud lähtekoodiga on üsna lihtne käivitada, kuid sellel on oma piirangud. See pistikprogramm loob väikese tööriistavihje menüü ikoonilinkidest, mis kuvatakse mis tahes teie valitud elemendil. See võib olla äärmiselt võimas koos kasutajaprofiili või muu ikooni-käsu liidesega. Kuid efekt on üsna varjatud, nii et ärge imestage, kui teil on raske seda oma paigutusse mahutada.
jQuery PowerTip
Regulaarsete näpunäidete käsitlemisel võiksite kaaluda jQuery PowerTipi kasutamist. See on üsna uus pistikprogramm, mis vabastati Githubis avatud lähtekoodina. Parema näite saamiseks võite vaadata reaalajas demoversiooni, kuid lihtsaim seletus on mõne HTML-i elemendi kohal hõljumisel tööriistavihje hüpikmenüüde loomine.
jqTimeline
JQtimeline pistikprogramm pakub väga ainulaadset funktsionaalsust, mida ma pole kunagi varem näinud. Terves loendis saate ehitada horisontaalse ajajoone koos kuupäeva sündmuste seadistusega. Sel viisil saavad kasutajad lisateabe kuvamiseks sündmusele klõpsata. Sellel on kindlasti oma praktiline kasutus, kuid korralikult töötamiseks kulub natuke kohandatud koodi.
Swipebox
Swipeboxi pistikprogramm on mobiilile reageeriv jQuery pildigalerii. See on spetsiaalselt ette nähtud mobiilsete veebirakenduste ja veebisaitide jaoks, mis on nutitelefonide ja tahvelarvutite jaoks tundlikud. Pildigalerii võtab enda alla kogu ekraani ja saate isegi slaidiseansi teiste piltide vahel sõrmega libistada.
MixItUp
MixItUpil on palju erinevaid kohandatud suvandeid ja ma ütleksin, et see on lähemal vahepealsele jQuery pistikprogrammile. Vaikeseadete kohandamisel ja selle oma lehele lisamisel peate mõistma mõnda mõistet. Kuid see võimaldab elemente, näiteks portfelliobjekte, pilte, fotosid ja palju muud, kiiresti sorteerida valitud galeriis.
jQuery õigekirjakontroll
Disainerid, kes tunnevad brauserisisest õigekirja kontrolli, võivad olla fännid või võivad seda täielikult vihkada. See jQuery plugin pakub teistsugust lahendust, kus saate redigeerida tagasihelistamise funktsiooni, et kuvada seotud sõnavara. See on julge pistikprogramm, mida saab täiesti vabalt kasutada, kuid mille korrektseks tööks on vaja ka pisut kohandamist.
Keri üles
ScrollUp on minu top 5 uues lemmik pluginas just kasutusmugavuse ja eelhäälestatud stiilide tõttu. Lisage lihtsalt JS-failid oma veebilehele ja seadke nihke kaugus ülalt. Siis, kui külastaja kerib sellest piirist kaugemale, ilmub alumisse nurka väike fikseeritud vahesein. See on suurepärane alternatiiv enda nupu kodeerimiseks nullist.
Nod Frontendi valideerimine
Nod on HTML-i sisestusvormide kasutajaliidese valideerimise pistikprogramm. JQuery abil saate seadistada tegelike aluste, mida peetakse headeks ja halbadeks andmeteks, ja kontrollige neid väärtusi pärast vormi esitamist. See ei lähe läbi enne, kui kõik kriteeriumid on täidetud.
Valige2
Valige rippmenüüd on alati kinni jäänud oma CSS-i stiilidest. Veebis on mõnda postitust, mis tegeleb teie valitud menüü kohandamisega, kuid mida kõik brauserid sageli ei toeta. See jQuery plugin Select2 on tavalise HTML-i välja välja täiend. Lisage lihtsalt pistikprogramm oma rubriiki ja kõiki valitud menüüsid saab värskendada väikese koodiga.
Tööriistavihje
Peale muu suurepärase jQuery tööriistavihje pistikprogrammi, pean nende alternatiivse andmebaasi jaoks soovitama tööriistatipstrit. Olen mõnes projektis kasutanud Tooltipsterit ja see töötab täpselt nii, nagu kirjeldatud. Paljusid võimalusi on nii lihtne rakendada ja see võimaldab arendajatel kohandada oma tööriistavihje vaid mõne CSS-i atribuudiga.
Vortex
See kummaline karussell stiilis pistikprogramm võimaldab teil luua dünaamilise pöörleva elementide paneeli. JQuery Vortexi pistikprogramm on üsna uus ja endiselt käivad regulaarselt värskendused. Kuid ma arvan, et see väärib märkimist, kuna tehnikad ei ole ikka veel nii tavapärased, kui võite eeldada.
iCheck
iCheck on üks parimaid jQuery pluginaid, mida ma teie sisestusväljade värskendamiseks kunagi leidnud olen. Kui valite õige naha- ja värvistiili, saavad ruudud ja raadionupud täiesti uue ilme. Tunnistan, et iCheck eksitab natuke nii paljude segaste võimalustega. Kuid mida rohkem te harjutate, seda hõlpsam on see pistikprogramm oma veebisaidile lisada.
Mis tahes loendite kerija
ALS või suvaline loendi kerimine on tüüpiline piltide slaidiseansside jaoks mõeldud jQuery plugin. Kuid piltide suurema kuvamise asemel pööratakse neid tavalise avalehe üksuste kerimiskonteineri moodi. Võimalusi on lisada nooled mõlemale küljele ja võimaldada külastajatel sisemiste elementide vahel käsitsi vahetada.
Tumbo
Tumbo on üsna algeline pistikprogramm voo kiireks kuvamiseks oma Tumblri ajaveebist. Seda saab värskendada, et kuvada mis tahes Tumblri ajaveebi sisu, kasutades lihtsalt alamdomeeni URL-i. Ilmselt pole kõigil seda vajadust, kuid on hea teada, et arendajad töötavad API-liideste kaudu nagu JavaScripti pistikprogrammidesse sisseehitatud Tumblr.
Spektragramm
Rääkides API-dest - see Spectragrami pistikprogramm on kiire meetod fotodele juurdepääsu saamiseks Instagramis. Lisate JS-failid lihtsalt päisesse ja määrake seejärel kasutaja või otsingupäring. Spectragrami pistikprogramm tõmbab kõik seotud tulemused ja seob need tagasi algse võttega.
jQuery Stripe
JQuery Stripe'i pistikprogramm pakub traditsioonilisemat pildigaleriid. Igal fotol kuvatakse ainult väike vertikaalne riba, millel võite klõpsata, et näidata kogu pilti. Vaadete vahetamiseks on paremal ja vasakul küljel ka nooled. Ma ei usu, et see on parim valik, kuid see võib olla ebaatüüpiliste veebisaidi paigutuste jaoks ebaloomulik lahendus.
SocialCount
SocialCount haldab veel ühte kummalist funktsiooni, mis saab palju taotlusi. See pistikprogramm võimaldab teil kiiresti tõmmata Twitteri, Facebooki ja Google+ jagamise numbrid. Sisestage lihtsalt siht-URL ja saate sotsiaalmeediumimärke kuvada kõikjal oma veebilehel.
Kohandatud kerimisriba pistikprogramm
jQuery kohandatud kerimisriba on põnev plugin, mis väärib palju tähelepanu. See on olnud võrgus juba mõnda aega, kuid selle efektid ei häiri kunagi. Nende kohandatud kerimisribade abil saate kiiresti luua liigutuse kerimise funktsiooniga div-elemendi. See sobib suurepäraselt kohandatud sisu käitlemiseks, mis ei peaks hõlmama kogu paigutust.
Smallipop
Smallipop on järjekordne ilus jQuery tööriistavihjete plugin. Vaadake mõnda näidet, kuidas seda rakendada. Iga näpunäidete plugin järgib oma reegleid ja need võivad kõigile mitte meeldida. Kuid ma arvan, et Smallipop on suurepärane valik arendajatele, kes hakkavad JavaScripti teekides kasutama.
jPanelMenu
jPanelMenu on veel üks populaarne jQuery pistikprogramm libiseva navigeerimise kasutamiseks. Võite need koodid kiiresti oma veebisaidile lisada, et efekte mis tahes lehele lisada. Lihtsalt sihtige avatud / suletud elementi ja kui kasutaja klõpsab, kuvab see teie peidetud navigeerimise. Vaadake reaalajas demovaadet, et näha seda efekti toimimas.
Intro.js
Intro.js on sissejuhatusega juhendatud ekskursiooni plugin jQuery jaoks. Võite valida palju valikuid ja kohandatud sätteid, kuid see võimaldab ka veebisaidi ainulaadsemat toimimist. Arvan, et Intro.js on parim jQuery pistikprogramm veebisaidil giidiga tutvumiseks. CSS on kergesti vormitav ja saate demonstreerida igasuguste erinevate paigutustega.
Lightbox_me
Varibokside ja valguskastide loetelu on alates 2011. aastast tohutult kasvanud. Ma arvan, et jQuery plugin Lightbox_me on selle funktsiooni veel üks ilus näide. Pilte, vorme, videoid ja muud HTML-i saate seadistada otse mooduli valguskasti. JS-koode on lihtne õppida ja pistikprogramm ei vaja tervet hunnikut kohandatud muudatusi.
jQuery karussell
Arvan, et abitgone jQuery Carousel on kindlasti omapärane variant. See kuvab eelnevad / järgmised lingid otse piltide jaotisesse, kapseldades kõik muud pildid. See näeb tõesti kena välja väiksemates ruumides ja saate näite suuruse muuta kõigeks, mida vajate. Minu arvates on seda väärt uurida, kuid see ei pruugi teie lemmikvariandina välja tulla.
Superboks
Kas olete kursis sellega, kuidas Google Images hetkel tulemusi kuvab? Nii töötab jQuery Superbox teie staatilisi pilte kasutades. Külastajatel on võimalus sirvida pisipilte ja kui nad klõpsavad, avaneb uus pilti kuvav uus div. Mulle see plugin väga meeldib, kuna kasutajakogemus jäljendab Google'i väga täpselt. Ja kuna inimesed on Google'iga juba tuttavad, pakub see sujuvat andmevahetust ilma suurema segaduseta.
KGaller
KGallery on veel üks ilus slaidiseansi funktsioonidega jQuery pildigalerii. Vaikeikoonid ei ole püsivad ja saate ilmselgelt kasutajaliidese teisi bitte värskendada. Minu tähelepanu köidab tegelikult võimalus lisada galerii kujundusse väiksemad pildi pisipildid. See on üsna lihtne pistikprogramm seadistamiseks ja soovitaksin proovida reaalajas demo, et näha, kuidas te rakenduse suhtes tunnete.
jQuery Litelighter
Viimase paari aasta jooksul on ilmunud palju suurepäraseid süntaksi esiletõstjaid. Kuid jQuery Litelighter on veel üks plugin, mida lihtsuse ja graatsilise olemuse tõttu tõesti hindan. Võite genereerida esiletõstetud süntaksi peaaegu kõigi populaarsete keelte jaoks ja see peaks toimima mis tahes levinuma veebibrauseri abil.
bxSlider
bxSlideril on lihtsalt üks slaidiseansi parimaid kasutuskogemusi. Saate seda rakendada oma kodulehel või saidi mis tahes muul lehel. See loob kindla kujunduse kasutajatele, kes tunnevad piltide slaidiseansi funktsioone. Ka jQuery koodid on väga minimalistlikud ega aja veebilehte üle pika laadimisaja.
MeanMenu
MeanMenu pistikprogramm on uuem väljalase ja seda tasub kindlasti uurida. Mulle väga meeldib, kuidas vaikimisi valitud navigatsioonikujundus automaatselt sisemiste linkide arvu põhjal automaatselt suureneb. Samuti võite lisada alammenüü linke, mis pakuvad külastajatele navigeerimismenüüst kiiremat vaadet. Kujundus ei ole kõigi jaoks suurepärane valik, kuid see on kindel pistikprogramm ja võib osutuda kasulikuks mõne veebisaidi projekti puhul.
