Molti sviluppatori web stanno saltando nel mare dei progetti di codice open source. Nuovi plugin e framework sono rilasciati quasi ogni giorno. E quando sei impegnato al lavoro può essere difficile stare al passo con tutte le novità.
In questa vetrina ho messo insieme oltre 30 diversi plugin jQuery che meritano una menzione per tutti gli sviluppatori web. Lo sviluppo di un'interfaccia di un sito Web può essere difficile e richiede certamente un'attenta precisione. Sviluppare al di sopra di qualsiasi progetto open source significa che non stai reinventando la ruota. Inoltre non sei l'unico rimasto per catturare bug nel codice. E poiché jQuery è una delle librerie JavaScript più stabili disponibili, questi plugin spesso funzionano mano nella mano per fornire un'esperienza utente senza soluzione di continuità.
Lettore audio sensibile al tocco reattivo
Questo lettore audio reattivo è l'esempio perfetto di jQuery al lavoro. Devi semplicemente includere i codici del plugin e creare un tipico elemento audio HTML5. Questo verrà automaticamente convertito in un lettore audio touch-friendly con un'interfaccia utente CSS3 abbagliante.
Sidr
Sono sicuro che molti designer e sviluppatori riconoscono il menu laterale scorrevole. Questo è diventato popolare tra le applicazioni mobili iOS utilizzando i pulsanti del menu scorrevole nella barra degli strumenti. E ora questo effetto può essere replicato per i siti Web che utilizzano solo jQuery e il plugin Sidr. Guarda la demo live e scopri come potrebbe funzionare nei tuoi progetti.
ImageLoader
Ti ricordi di aver visto tutti questi plugin di immagine lazyload? Ci sono così tante diverse opzioni e anche alcuni plugin gratuiti per WordPress sono stati rilasciati. Questo particolare plugin per caricatore di immagini segue un esempio molto più carino con tutte le immagini che si caricano in ordine sequenziale, seguendo un effetto di dissolvenza. La demo dal vivo è un ottimo esempio di come puoi applicare questo al tuo sito web.
campioni
Sebbene Swatches non possa avere un uso pratico in molti layout di siti Web, è un meraviglioso plugin jQuery per giocare con colori specifici. Questo plugin creerà un'area div utilizzando una tavolozza di colori correlati in base alla scelta di input. Generare la propria combinazione di colori può essere difficile e questo è uno strumento open source unico per il lavoro.
Caldo su Facebook
Calda su Facebook è un'idea piuttosto oscura. Ma il plugin funziona perfettamente con tutti i browser conformi agli standard, quindi per coloro che amano condividere Facebook questo è ciò che fa per te! Hot su Facebook prenderà un URL e controllerà il numero totale di azioni FB. Quindi verrà visualizzato sulla pagina come badge di condivisione dei social media.
Toolbar.js
Lo script Toolbar.js open source è abbastanza facile da eseguire, ma ha i suoi limiti. Questo plugin creerà un piccolo menu di suggerimenti per icone che apparirà su qualsiasi elemento tu scelga. Può essere immensamente potente accoppiato con un profilo utente o un'altra interfaccia di comando icone. Tuttavia l'effetto è piuttosto oscuro, quindi non sorprenderti se hai difficoltà a farlo nel tuo layout.
jQuery PowerTip
Per quanto riguarda la gestione dei passaggi del tooltip regolari, è possibile considerare jQuery PowerTip. Questo è un plugin abbastanza nuovo rilasciato come open source su Github. Puoi vedere la demo dal vivo per vedere un esempio migliore, ma la spiegazione più semplice è la creazione di menu popup di suggerimenti quando si passa sopra un elemento HTML.
jqTimeline
Il plugin jQtimeline offre funzionalità davvero uniche che non ho mai visto prima. È possibile creare una timeline orizzontale con l'impostazione degli eventi di data in tutto l'elenco. In questo modo, gli utenti possono fare clic su un evento per visualizzare maggiori informazioni. Sicuramente ha i suoi usi pratici, ma richiederà un po 'di codice personalizzato per funzionare correttamente.
Swipebox
Il plug-in Swipebox è una galleria di immagini jQuery mobile reattiva. Questo è appositamente progettato per applicazioni web mobili e siti web che sono resi sensibili per smartphone e tablet. La galleria di immagini occuperà l'intero schermo e potrai persino sfiorare le altre immagini nella presentazione.
Mescolalo
MixItUp ha un sacco di varie opzioni personalizzate e direi che questo è più vicino a un plugin jQuery intermedio. Dovrai capire alcuni concetti quando personalizzi la configurazione predefinita e la aggiungi alla tua pagina. Ma consentirà un rapido smistamento di elementi all'interno di una galleria di set come oggetti del portfolio, immagini, fotografie e molto altro ancora.
jQuery Spellchecker
I progettisti che hanno familiarità con il controllo ortografico del browser potrebbero essere un fan o potrebbero odiarlo completamente. Questo plugin jQuery offre una soluzione diversa in cui è possibile modificare la funzione di callback per visualizzare il vocabolario correlato. È un plugin audace che è completamente gratuito, ma richiede anche un po 'di personalizzazione per funzionare correttamente.
Scorrere verso l'alto
ScrollUp è tra i miei primi 5 nuovi plugin preferiti solo per la sua facilità d'uso e gli stili predefiniti. Basta includere i file JS nella pagina Web e impostare la distanza di offset dall'alto. Quindi, dopo che un visitatore scorre oltre questo limite, apparirà un piccolo div fisso nell'angolo in basso. È un'ottima alternativa alla codifica del tuo pulsante da zero.
Nod Frontend Validation
Nod è un plug-in di convalida di frontend per moduli di input HTML. Usando jQuery puoi configurare la base reale per ciò che è considerato buono e dati cattivi, quindi controlla questi valori dopo che l'utente ha inviato il modulo. Non passerà fino a quando tutti i criteri non saranno soddisfatti.
Select2
Selezionare i menu a discesa sono sempre stati bloccati nei propri stili CSS. Ci sono alcuni post online che approfondiscono la personalizzazione del tuo menu di selezione, ma spesso non sono supportati da tutti i browser. Questo plug-in jQuery Select2 è un miglioramento nel campo di selezione HTML tipico. Basta includere il plugin all'interno dell'intestazione e tutti i menu selezionati possono essere aggiornati con un piccolo bit di codice.
Tooltipster
A parte l'altro ottimo plugin per tooltip di jQuery, devo consigliare Tooltipster per il loro codebase alternativo. Ho usato Tooltipster in alcuni progetti e funziona esattamente come descritto.Molte delle opzioni sono così facili da implementare e questo consente agli sviluppatori di personalizzare le proprie descrizioni con solo alcune proprietà CSS.
Vortice
Questo strano plug-in stile carosello ti consente di creare un pannello di elementi rotanti dinamici. Il plugin jQuery Vortex è abbastanza nuovo e ci sono ancora degli aggiornamenti che vengono applicati regolarmente. Comunque penso che valga la pena menzionarlo, poiché le tecniche non sono ancora mainstream come ci si potrebbe aspettare.
verifico
iCheck è uno dei migliori plugin jQuery che abbia mai trovato per aggiornare i campi di input. Le caselle di controllo e i pulsanti di opzione riceveranno un aspetto totalmente nuovo quando scegli la pelle e il colore appropriati. Ammetto che iCheck è un po 'ingannevole con così tante opzioni confuse all'inizio. Ma più ti eserciti più facilmente si arriva a includere questo plug-in all'interno del tuo sito web (s).
Qualsiasi elenco Scroller
ALS o Any List Scroller è un tipico plugin jQuery per le presentazioni di immagini. Ma invece di visualizzare le immagini in una vista più grande, vengono ruotate come un tipico contenitore di oggetti della pagina iniziale. Ci sono opzioni per includere le frecce su entrambi i lati e consentire ai visitatori di passare manualmente tra gli elementi interni.
Tumbo
Tumbo è un plugin abbastanza rudimentale per visualizzare rapidamente un feed dal tuo blog Tumblr. Questo può essere aggiornato per visualizzare i contenuti da qualsiasi blog Tumblr semplicemente usando l'URL del sottodominio. Ovviamente non tutti ne avranno bisogno, ma è bene sapere che gli sviluppatori stanno lavorando attraverso API come Tumblr integrate nei plugin JavaScript.
Spectragram
A proposito di API: questo plug-in Spectragram è un metodo rapido per accedere alle foto da Instagram. È sufficiente includere i file JS nell'intestazione e quindi specificare un utente o una query di ricerca. Il plug-in Spectragram estrae tutti i risultati correlati e ricollega allo scatto originale.
jQuery Stripe
Il plugin jQuery Stripe offre una galleria di immagini più tradizionale. Ogni foto verrà visualizzata solo come un piccolo nastro verticale su cui è possibile fare clic per mostrare l'intera immagine. Ci sono anche frecce sui lati destro e sinistro per cambiare tra le visualizzazioni. Non penso che sia l'opzione migliore ma può essere una soluzione insolita per i layout atipici del sito web.
SocialCount
SocialCount gestisce un'altra strana funzionalità che riceve molte richieste. Questo plug-in ti consentirà di estrarre rapidamente i numeri per le condivisioni Twitter, Facebook e Google+. Inserisci semplicemente l'URL di destinazione e puoi visualizzare i badge dei social media ovunque nella tua pagina web.
Plugin barra di scorrimento personalizzata
jQuery Custom Scrollbar è un plugin affascinante che merita molta attenzione. Questo è online da un po 'di tempo, ma gli effetti non smettono mai di stupire. È possibile creare rapidamente un elemento div con una funzione di overscroll utilizzando queste barre di scorrimento personalizzate. È perfetto per gestire contenuti personalizzati che non dovrebbero occupare l'intero layout.
Smallipop
Smallipop è un altro bellissimo plugin per tooltips di jQuery. Dovresti guardare alcuni degli esempi per vedere come sarebbe implementato. Ogni plugin di tooltip segue le sue regole e possono o meno piacere a tutti. Ma penso che Smallipop sia un'ottima scelta per gli sviluppatori che iniziano nelle librerie JavaScript.
jPanelMenu
jPanelMenu è un altro famoso plugin jQuery per l'utilizzo di una navigazione scorrevole. È possibile includere rapidamente questi codici all'interno del proprio sito Web per aggiungere gli effetti su qualsiasi pagina. Basta scegliere come target l'elemento di apertura / chiusura e ogni volta che l'utente fa clic, visualizzerà la tua navigazione nascosta. Dai un'occhiata alla demo dal vivo per vedere questo effetto in azione.
Intro.js
Intro.js è un plug-in introduttivo per tour guidati per jQuery. Esistono molte opzioni e impostazioni personalizzate che è possibile scegliere, ma ciò consente anche prestazioni del sito Web più esclusive. Penso che Intro.js sia il miglior plugin di jQuery per creare un tour guidato del sito web. Il CSS è facilmente malleabile e puoi demo con tutti i tipi di layout diversi.
Lightbox_me
L'elenco di shadowbox e lightbox è cresciuto enormemente dal 2011. Penso che il plugin jQuery Lightbox_me sia un altro bellissimo esempio di questa funzionalità. È possibile impostare immagini, moduli, video e altro codice HTML direttamente in una lightbox modale. I codici JS sono facili da imparare e il plugin non richiede un sacco di modifiche personalizzate.
jQuery Carousel
Penso che l'abitgone jQuery Carousel sia decisamente un'opzione particolare. Questo mostrerà i collegamenti prev / next proprio all'interno dell'immagine div che incapsula tutte le altre immagini. Sembra davvero bello in spazi più piccoli e puoi ridimensionare l'esempio a qualsiasi cosa tu abbia bisogno. Sento che vale la pena esaminare, ma potrebbe non essere la tua opzione preferita.
Superbox
Hai familiarità con il modo in cui Google Immagini visualizza attualmente i risultati? Ecco come jQuery Superbox funziona utilizzando le tue immagini statiche. I visitatori hanno la possibilità di sfogliare le anteprime e, una volta cliccato, si aprirà un nuovo div che mostra l'intera immagine. Mi piace molto questo plugin perché l'esperienza dell'utente imita molto da vicino Google. E dal momento che le persone hanno già familiarità con Google, fornisce uno scambio di dati senza intoppi senza molta confusione.
KGallery
KGallery è un'altra bellissima galleria di immagini jQuery con funzioni di presentazione. Le icone predefinite non sono permanenti e ovviamente puoi aggiornare altri bit dell'interfaccia utente. Ciò che attira davvero la mia attenzione è la possibilità di includere miniature di immagini più piccole all'interno del design della galleria. È un plugin abbastanza semplice da configurare e ti consiglio di testare la demo live per vedere come ti senti riguardo all'implementazione.
jQuery Litelighter
Numerosi evidenziatori di sintassi sono stati pubblicati negli ultimi anni. Ma jQuery Litelighter è un altro plugin che apprezzo molto per la semplicità e la natura aggraziata. È possibile generare la sintassi evidenziata per quasi tutti i linguaggi popolari e dovrebbe funzionare utilizzando uno dei browser Web più comuni.
bxSlider
bxSlider ha semplicemente una delle migliori esperienze utente per una presentazione di immagini. È possibile implementare questo diritto sulla tua home page o all'interno di qualsiasi altra pagina del sito. Fornirà un design solido per gli utenti che hanno familiarità con le funzioni di presentazione di immagini. Anche i codici jQuery sono molto minimalisti e non impantanano il sito web per lunghi tempi di caricamento.
MeanMenu
Il plugin MeanMenu è una versione più recente e sicuramente vale la pena di essere esaminata. Mi piace molto il modo in cui il design di navigazione predefinito verrà ridimensionato automaticamente in base al numero totale di collegamenti interni. Inoltre è possibile includere collegamenti ai sottomenu che offrono ai visitatori una visione più rapida del menu di navigazione. Il design non è una buona scelta per tutti, tuttavia è un plugin solido e può rivelarsi utile su alcuni progetti di siti web.
