Många webbutvecklare hoppar in i havet av öppna källkodsprojekt. Nya plugins och ramar släpps nästan varje dag. Och när du är upptagen på jobbet kan det vara svårt att fortsätta med alla nyaste utgåvor.
I den här utställningen har jag sammanlagt över 30 olika jQuery-plugins som är värda att nämna till alla webbutvecklare. Att utveckla en webbplatsgränssnitt kan vara tuff och kräver viss noggrann precision. Utveckling ovanpå alla öppna källprojekt innebär att du inte återuppfinner hjulet. Dessutom är du inte den enda kvar för att fånga fel i koden. Och eftersom jQuery är ett av de mest stabila JavaScript-biblioteken, fungerar dessa plugins ofta hand i hand för att ge en sömlös användarupplevelse.
Responsiv Touch-Friendly Audio Player
Denna lyhörda ljudspelare är det perfekta exemplet på jQuery på jobbet. Du inkluderar helt enkelt pluginkoderna och skapar ett typiskt HTML5-ljudelement. Detta konverteras automatiskt till en snyggvennlig ljudspelare med ett bländande CSS3 användargränssnitt.
Sidr
Jag är säker på att många designers och utvecklare känner igen glidningssidanmenyn. Det blev populärt från iOS-mobila applikationer med hjälp av glidande menyknappar i verktygsfältet. Och nu kan denna effekt replikeras för webbplatser som bara använder jQuery och Sidr-plugin. Kolla in live demo och se hur det kan fungera i dina egna projekt.
Imageloader
Kommer du ihåg att se alla dessa lazyload image plugins? Det finns så många olika alternativ, och även några gratis open source WordPress-plugins har släppts. Denna speciella bildlastare plugin följer ett mycket trevligare exempel med alla bilder som laddas i en sekventiell ordning, efter en blekande effekt. Den levande demo är ett utmärkt exempel på hur du kan tillämpa detta på din webbplats.
rutor~~POS=HEADCOMP
Även om prickor kanske inte har praktisk användning på många webbsidor, är det ett underbart jQuery-plugin för smekning med specifika färger. Denna plugin skapar ett div-område med en palett av relaterade färger baserat på ditt val. Att skapa ditt eget färgschema kan vara svårt och det här är ett unikt öppen källverktyg för jobbet.
Hot på Facebook
Hot på Facebook är en ganska obskyrlig idé. Men plugin fungerar perfekt i alla standardkompatibla webbläsare, så för dem som gillar Facebook delning är det här för dig! Hot på Facebook tar en URL och kontrollerar det totala antalet FB-aktier. Då kommer det att visas på sidan som en delad märke för social media.
Toolbar.js
Skriptet Openbar Toolbar.js är ganska lätt att köra, men har begränsningar. Denna plugin skapar en liten verktygstipsmeny med ikonlänkar som visas på vilket element du väljer. Det kan vara oerhört kraftfullt kopplat till en användarprofil eller ett annat ikonkommandot gränssnitt. Effekten är dock ganska obskär, så bli inte förvånad om du har svårt att anpassa det till din layout.
jQuery PowerTip
När det gäller hantering av vanliga verktygstipshovers kan du överväga jQuery PowerTip. Detta är en ganska ny plugin som släpptes som öppen källkod på Github. Du kan kolla in live-demo för att se ett bättre exempel, men den enklaste förklaringen är att skapa verktygsmenyns popupmenyer när du svävar över ett visst HTML-element.
jqTimeline
JQtimeline-plugin erbjuder mycket unik funktionalitet som jag aldrig sett tidigare. Du kan bygga en horisontell tidslinje med inställningar för datumhändelser i hela listan. På så sätt kan användare klicka på en händelse för att visa mer information. Det har säkert sina praktiska användningsområden men kommer att ta lite anpassad kod för att fungera korrekt.
Swipebox
Swipebox-plugin är ett mobilt mottagande jQuery bildgalleri. Detta är speciellt utformat för mobila webbapps och webbplatser som görs mottagliga för smartphones och surfplattor. Bildgalleriet tar upp hela skärmen, och du kan till och med trycka på-swipe mellan andra bilder i bildspelet.
Blanda det
MixItUp har många olika anpassade alternativ och jag skulle säga att det här är närmare ett mellanliggande jQuery-plugin. Du måste förstå några begrepp när du anpassar standardinställningen och lägger till den i din sida. Men det kommer att möjliggöra snabb sortering av element inom ett visst galleri som portföljartiklar, bilder, fotografier och så mycket mer.
jQuery Spellchecker
Designers som är bekant med stavningskontroll i webbläsaren kan vara en fläkt eller helt hata det. Detta jQuery-plugin erbjuder en annan lösning där du kan redigera återuppringningsfunktionen för att visa relaterat ordförråd. Det är ett vågat plugin som är helt gratis att använda, men kräver också lite anpassning för att fungera korrekt.
Skrolla upp
ScrollUp finns i mina 5 nya favorit plugins bara för enkel användning och förkonstruerade stilar. Helt enkelt inkludera JS-filerna på din webbsida och ställ in offsetavståndet från toppen. Sedan efter en besökare rullar bortom denna gräns kommer en liten fast div att visas i nedre hörnet. Det är ett utmärkt alternativ för att koda din egen knapp från början.
Nod Frontend Validation
Nod är ett valideringsprogram för frontend för HTML-formulär. Med jQuery kan du ställa in den faktiska grunden för vad som anses vara bra och dålig data, kontrollera sedan dessa värden efter att användaren skickat formuläret. Det går inte igenom tills alla kriterier är uppfyllda.
Select2
Välj rullgardinsmenyer har alltid fastnat i sina egna CSS-format. Det finns några inlägg på nätet som dyker in för att anpassa din egen välj meny, men stöds ofta inte av alla webbläsare. Denna jQuery-plugin Select2 är en förbättring av det typiska HTML-fältet. Ta bara in plugin-modulen inom din rubrik och alla valda menyer kan uppdateras med en liten bit kod.
Tooltipster
Bortsett från det andra bra jQuery tooltip plugin, måste jag rekommendera Tooltipster för deras alternativa codebase. Jag har använt Tooltipster i några projekt och det fungerar precis som beskrivet.Många av alternativen är så lätta att implementera, och det gör det möjligt för utvecklare att anpassa sina egna verktygstips med bara några CSS-egenskaper.
Virvel
Den här underliga karusellstil plugin låter dig skapa en dynamisk roterande panel av element. JQuery Vortex-plugin är ganska nytt, och det finns fortfarande uppdateringar som tillämpas regelbundet. Men jag tycker att det är värt att nämna eftersom teknikerna fortfarande inte är så vanliga som du kan förvänta dig.
Jag kontrollerar
iCheck är en av de bästa jQuery-plugins jag någonsin har hittat för att uppdatera dina inmatningsfält. Kryssrutor och radioknappar kommer att få ett helt nytt utseende när du väljer rätt hud och färgstil. Jag kommer att medge att iCheck är lite lurande med så många förvirrande alternativ först. Men ju mer du tränar desto lättare kommer det att få inkludera det här pluginet på din webbplats (er).
Eventuell lista Scroller
ALS eller Any List Scroller är ett typiskt plugin för jQuery för bildspel. Men i stället för att visa bilderna i en större vy roteras de som en typisk hemsida-objektrullebehållare. Det finns alternativ att inkludera pilar på båda sidor och låta besökare manuellt byta mellan interna element.
Tumbo
Tumbo är ett ganska rudimentärt plugin för att snabbt visa ett flöde ur din Tumblr-blogg. Detta kan uppdateras för att visa innehållet från en Tumblr-blogg bara genom att använda underdomänadressen. Självklart kommer inte alla att behöva detta, men det är bra att veta att utvecklare arbetar sig igenom API: er som Tumblr inbyggda i JavaScript-plugins.
spektra
Tala om API: er - detta Spectragram-plugin är en snabb metod för att få tillgång till foton från Instagram. Du inkluderar helt enkelt JS-filerna i din rubrik och anger sedan en användare eller sökfråga. Spectragram-plugin kommer att dra alla relaterade resultat och länka tillbaka till originalbildet.
jQuery Stripe
Den jQuery Stripe plugin erbjuder ett mer traditionellt bildgalleri. Varje bild visas bara som en liten vertikal skiva som du kan klicka för att visa hela bilden. Det finns också pilar på höger och vänster sida för att ändra mellan vyer. Jag tror inte att det är det bästa alternativet, men det kan vara en oslagbar lösning för atypiska webbsidor.
SocialCount
SocialCount hanterar en annan konstig funktion som får många begäranden. Med denna plugin kan du snabbt dra ut siffrorna för Twitter, Facebook och Google+. Ange bara måladressen och du kan visa sociala medier märken var som helst på din webbsida.
Anpassad Scrollbar Plugin
jQuery Custom Scrollbar är en fascinerande plugin som förtjänar mycket uppmärksamhet. Det här har varit online länge nu, men effekterna slutar aldrig att förvåna. Du kan snabbt skapa ett div-element med en överskridningsfunktion med hjälp av dessa anpassade rullningsfält. Den är perfekt för hantering av anpassat innehåll som inte bör ta upp hela layouten.
Smallipop
Smallipop är ännu en annan vacker jQuery verktygstips plugin. Du bör titta på några av exemplen för att se hur detta skulle genomföras. Varje plugin för verktygstips följer sina egna regler och de kan eller kanske inte vädja till alla. Men jag tror Smallipop är ett bra val för utvecklare att komma igång i JavaScript-bibliotek.
jPanelMenu
jPanelMenu är ett annat populärt jQuery-plugin för att använda en glidande navigering. Du kan snabbt inkludera dessa koder på din webbplats för att lägga till effekterna på en sida. Bara rikta på öppna / stänga elementet och när användaren klickar kommer den att visa din dolda navigering. Ta en titt på live demo för att se denna effekt i åtgärd.
Intro.js
Intro.js är en introduktion guidad plugin för jQuery. Det finns många alternativ och anpassade inställningar du kan välja, men det här möjliggör också en mer unik webbplatsprestanda. Jag tror att Intro.js är det bästa jQuery-plugin-programmet för att skapa en guidad webbplatsturné. CSS är lätt formbar och du kan demo med alla möjliga olika layouter.
Lightbox_me
Listan över skugglådor och ljuslådor har ökat enormt sedan 2011. Jag tror att jQuery-plugin Lightbox_me är ett annat vackert exempel på den här funktionen. Du kan konfigurera bilder, blanketter, videor och annan HTML direkt i en modal lightbox. JS-koderna är lätta att lära och plugin kräver inte en hel massa anpassade ändringar.
jQuery Carousel
Jag tror att den abitgone jQuery Carousel är definitivt ett märkligt alternativ. Detta kommer att visa föregående / nästa länkar direkt i bild-diven som inkapslar alla andra bilder. Det ser väldigt trevligt ut i mindre utrymmen och du kan ändra storlek på exemplet till allt du behöver. Jag tycker att det är värt att titta på men det kanske inte kommer ut som ditt favoritalternativ.
Superbox
Känner du dig till hur Google Bilder visar resultat för närvarande? Så här fungerar jQuery Superbox med egna statiska bilder. Besökare har möjlighet att bläddra i miniatyrer och när de klickar öppnas en ny div som visar hela bilden. Jag gillar verkligen det här pluginet, eftersom användarupplevelsen efterliknar Google mycket nära. Och eftersom människor redan är bekanta med Google ger det en sömlös datautbyte utan stor förvirring.
KGallery
KGallery är ett annat vackert jQuery bildgalleri med bildspel funktioner. Standardikonen är inte permanenta och du kan självklart uppdatera andra bitar i användargränssnittet. Det som verkligen hämtar min uppmärksamhet är möjligheten att inkludera mindre miniatyrbilder i galleridesignen. Det är en ganska enkel plugin för installation och jag rekommenderar att du testar live demo för att se hur du känner till implementeringen.
jQuery Litelighter
Massor av bra syntaxljus har släppts under de senaste åren. Men jQuery Litelighter är ett annat plugin jag uppskattar verkligen för enkelhet och graciös natur. Du kan generera markerad syntax för nästan alla populära språk, och det ska fungera med någon av de vanligaste webbläsarna.
bxSlider
bxSlider har helt enkelt en av de bästa användarupplevelserna för ett bildspel. Du kan implementera denna rätt på din hemsida eller inom någon annan sida på webbplatsen. Det kommer att ge en solid design för användare som är bekant med bildspelstillverkningsfunktioner. JQuery-koderna är också mycket minimalistiska och inte bogseras över webbplatsen under långa laddningstider.
MeanMenu
MeanMenu-plugin är en nyare version och är verkligen värt att titta på. Jag gillar verkligen hur standardnavigeringsdesign automatiskt ändras baserat på det totala antalet interna länkar. Du kan också inkludera undermenylänkar som ger besökare en snabbare bild av din navmeny. Designen är inte ett bra val för alla, men det är en solid plugin och kan vara användbar på vissa webbprojekt.
