10 librerie Javascript ottime per creare elementi dinamici nelle pagine HTML.

Lo sviluppo web è radicalmente cambiato negli ultimi anni.

Fino a qualche tempo fa l’implementazione di elementi dinamici nella pagine HTML veniva realizzata con spezzoni di codice Javascript creati ad hoc, che spesso, all’aumentare della complessità divenivano intricati e difficile da mantenere.

Per fortuna oggi abbiamo a disposizione numerose librerie Javascript liberamente utilizzabili, già testate e ottimizzate per tutti i browser.

Vi presentiamo una lista di 10 librerie molto utili, e quasi irrinunciabili per realizzare una moderna applicazione web.


1. JQuery.
Jquery è per così dire la madre di tutte le librerie Javascript. E’ un componente indispensabile e fondamentale, al punto che molti ormai confondono lo stesso Javascript con Jquery. La librerie contiene numerose funzionalità: manipolazione e selezioni di elementi del Document Object Model (DOM), gestione degli eventi, effetti di movimento e transizione, funzioni di utilità e molto altro. Chiunque voglia intraprendere la professione dello sviluppo web sarà in qualche modo obbligato ad utilizzare questa libreria, e difficilmente riuscirà a rinunciarci. Le librerie che seguono sono di fatto dei plugin di jquery che ne estendono le potenzialità e ne arricchiscono le funzionalità.

2. JQuery UI.
JQuery UI è uno dei più utilizzati plugin di JQuery ed è focalizzato sull’implementazione delle interfacce grafiche. Grazie a questa libreria abbiamo la possibilità di utilizzare facilmente widget per la user interface come: bottoni, tab, data picker, caselle di testo con autocomplete, accordion, menù e molto altro. E’ sufficiente guardare i demo sul sito ufficiale per rendersi conto delle potenzialità. Una caratteristica di questa libreria è la possibilità di personalizzare rapidamente l’aspetto grafico dei componenti grazie ad un tool messo a disposizione dagli sviluppatori per la creazione di fogli di stile personalizzati in modo da integrare perfettamente il tutto con il layout del nostro sito.

3. Fancy Box.
Fancy box è in realtà uno dei più usati script che permettono di realizzare dei pop-up moderni, funzionali e accattivanti. Viene usato moltissimo ad esempio per creare delle foto gallery a tutto schermo in sovrapposizione rispetto al contenuto che stiamo visualizzando, ma in realtà possiamo personalizzare numerosi aspetti, come i contenuti, gli effetti di transizione, l’aspetto e la posizione dei titoli, le modalità di interazione utente e molto altro.

4. Nivo Slider.
Lo slider di foto è uno degli elementi più usati nei siti web moderni. Nivo è una delle più rinomate librerie per creare fantastici slider, utilizzando uno script di pochi Kbyte avremo a disposizione 16 effetti di transizione con un setup semplicissimo, codice di markup semantico e pulito, e tante possibilità di personalizzazione per il nostro slider.

Leggi anche: Le librerie JavaScript facilitano notevolmente il compito del programmatore.

5. Validator.
Quando creiamo un form sul web, uno degli aspetti da tenere sempre a mente è la validazione dei dati inseriti dall’utente. La validazione può essere effettuata sia lato server che lato client, ma naturalmente per rendere la User Experience più rapida ed efficace è consigliabile utilizzare laddove possibile una validazione direttamente sul client. JQuery Validator è forse il plugin più usato in assoluto in tal senso, possiamo con pochissime righe di codice, definire delle regole che i campi del form dovranno rispettare affinchè siano considerati validi: campo richiesto, numerico, email, lunghezza minima o massima, e molto altro. Potremo anche definire delle regole personalizzate (ad esempio se volessimo validare una partita iva o un codice fiscale), e impostare numerosi aspetti della libreria come la modalità di visualizzazione dei messaggi di errore o il contenuto dei messaggi stessi.

6. JCarousel.
Mentre lo slider ci mostra una foto alla volta, il “Carousel” è un elemento grafico che mostra un elenco scorrevole di immagini in orizzontale o in verticale anche in più elementi alla volta. Questo effetto è molto utile quando ad esempio vogliamo mostrare una lunga lista di thumbnail che l’utente può scorrere o selezionare. JCarousel è uno script molto versatile che si adatta a varie situazioni, possiamo dare un’occhiata ai demo per capire immediatamente come questa libreria ci può tornare utile. Il punto di forza è la facilità con cui possiamo personalizzare sia l’aspetto grafico che funzionale.

7. JCookie.
Questo semplicissimo ci consente con una riga di codice di salvare un cookie lato client, leggerne il contenuto e verificare se il browser in uso supporta o meno i cookie. E’ una piccola utility che torna sempre utile in molti casi ed è bene tenerla sempre a portata di mano.

8. Block UI.
Spesso quando costruiamo interfacce grafiche, sorge la necessità di bloccare l’utente finchè una certa operazione non sia terminata, ad esempio se facciamo il submit di un post in ajax vorremmo evitare che l’utente clicchi su altri pulsanti fino al termine dell’operazione. In questo, ma anche in molte altre situazioni, Block UI fa al caso nostro. Si tratta di uno script che impedisce all’utente di interagire con la user interface mostrando un messaggio o un’animazione di attesa. Al termine dell’operazione potremmo riabilitare l’interfaccia chiamando il metodo di “unblock”.

9. Hover Intent.
Questo plugin di JQuery serve per estendere il concetto di evento “mouse hover”, il quale normalmente scatta immediatamente nel momento in cui posizioniamo il puntatore del mouse sopra un elemento. Spesso però questo accade anche in maniera non voluta, per sbaglio o perchè stiamo spostando il mouse velocemente, l’evento l’Hover Intent, invece scatta quando effettivamente l’utente ha intenzione di “sostare” su un dato elemento, ovvero quando ci lascia sopra il puntatore del mouse per un certo lasso di tempo. Questo plugin è molto semplice ma a volte migliora notevolmente la user experience.

10. JQuery Tooltip.
Infine uno degli elementi dinamici più utili all’interno delle nostre pagine: il tooltip. Lo possiamo usare ad esempio per fornire la spiegazione di un comando, o per dare un aiuto durante la compilazione di un form. Il plugin Jquery Tooltip è facilmente utilizzabile per questo scopo, ha numerose configurazioni su cui possiamo intervenire e lo possiamo personalizzare dal punto di vista grafico per adattarlo al nostro sito.

Se ti è piaciuto l'articolo , iscriviti al feed cliccando sull'immagine sottostante per tenerti sempre aggiornato sui nuovi contenuti del blog: