jQuery UI · Marco Consiglio

🗺️ Cos'è jQuery UI — widget interattivi costruiti su jQuery

jQuery UI è una libreria di widget interattivi (datepicker, slider, accordion, dialog) costruita SOPRA jQuery: a differenza dei framework CSS visti finora (Bootstrap, Materialize, Tailwind, W3.CSS, Pure), jQuery UI si concentra su COMPORTAMENTO e interattività JavaScript, non su un intero sistema di layout/grid.

Un progetto potrebbe usare jQuery UI SOLO per un datepicker o uno slider, mantenendo Bootstrap (o qualsiasi altro framework) per il resto del layout — i due tipi di libreria non sono in competizione diretta, coprono esigenze diverse.

⚙️ Setup — richiede jQuery come dipendenza obbligatoria

<head> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> </head> <body> // contenuto // ORDINE OBBLIGATORIO: jQuery PRIMA, jQuery UI DOPO <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> </body>

⚠️ jQuery UI è costruito COME ESTENSIONE di jQuery: se lo script di jQuery UI viene caricato PRIMA di jQuery (ordine invertito), la pagina genera un errore JavaScript perché jQuery UI cerca di estendere un oggetto $ che non esiste ancora — questo è diverso da Bootstrap, che non richiede alcuna libreria esterna per il proprio JS bundle.

📅 Datepicker — selettore data con calendario

<input id="data-nascita" type="text"> <script> $( "#data-nascita" ).datepicker({ dateFormat: "dd/mm/yy", changeMonth: true, changeYear: true }); </script>

Anteprima (statica)

‹ Agosto 2026 ›

LMMGVSD 12

💡 Il pattern $("#selettore").datepicker({...}) è tipico di TUTTI i widget jQuery UI: si seleziona un elemento con la sintassi jQuery, poi si chiama il METODO del widget (qui datepicker()) passando un oggetto di opzioni — lo stesso schema si ripete per slider, accordion, dialog.

🎚️ Slider — selezione di un valore numerico trascinando

<div id="slider-prezzo"></div> <p>Prezzo massimo: <span id="valore-prezzo"></span></p> <script> $( "#slider-prezzo" ).slider({ min: 0, max: 500, value: 200, slide: function( event, ui ) { $( "#valore-prezzo" ).text( ui.value ); } }); </script>

Anteprima (statica)

💡 La callback slide riceve un oggetto ui con la proprietà ui.value: questo è il pattern per REAGIRE al trascinamento in tempo reale, aggiornando un altro elemento della pagina (qui: il testo che mostra il valore corrente) mentre l'utente sposta il cursore.

🪗 Accordion e Tabs — sezioni di contenuto commutabili

<div id="accordion-faq"> <h3>Domanda 1</h3> <div><p>Risposta alla domanda 1.</p></div> <h3>Domanda 2</h3> <div><p>Risposta alla domanda 2.</p></div> </div> <script> $( "#accordion-faq" ).accordion(); </script>

Anteprima (statica)

▼ Domanda 1

Risposta alla domanda 1.

▶ Domanda 2

⚠️ jQuery UI si aspetta una struttura HTML SPECIFICA per l'accordion: coppie alternate di <h3> (intestazione cliccabile) e <div> (contenuto) come figli diretti del contenitore — una struttura diversa (es. intestazioni in <span> invece di <h3>) impedisce al widget di riconoscere correttamente le sezioni.

🖱️ Draggable e Sortable — trascinare elementi

// un singolo elemento trascinabile liberamente $( "#elemento-trascinabile" ).draggable(); // una LISTA di elementi riordinabile tramite trascinamento $( "#lista-riordinabile" ).sortable({ update: function( event, ui ) { // chiamata ogni volta che l'ordine cambia const nuovoOrdine = $( this ).sortable( "toArray" ); } });

✅ sortable() è l'equivalente jQuery UI del drag & drop nativo del browser già visto nella guida sul Page Builder stile Elementor — la differenza è che jQuery UI fornisce il comportamento COMPLETO pronto (animazioni, placeholder visivo durante il trascinamento, callback update), mentre l'implementazione nativa richiedeva scrivere manualmente gli event listener dragstart/drop.

🧩 Applicazioni tipiche

Widget	Uso tipico
Datepicker	Form di prenotazione, data di nascita, filtri per intervallo di date
Slider	Filtro prezzo in un e-commerce, controllo volume/luminosità
Accordion	Sezioni FAQ, documentazione con argomenti espandibili
Sortable	Riordinare elementi di una lista task, priorità di elementi in un pannello admin
Dialog	Finestre modali personalizzabili in progetti jQuery legacy (pre-Bootstrap)

🎓 Esercitazioni pratiche

Form di prenotazione con datepicker

Crea un form con due campi data (check-in, check-out), entrambi con datepicker configurato in formato italiano (dd/mm/yy).

⏱ 20 min📦 1 file HTML💻 Individuale

Filtro prezzo con slider a due maniglie

Crea uno slider con range (min/max, due maniglie) per filtrare un prezzo minimo e massimo, mostrando i due valori aggiornati in tempo reale.

⏱ 25 min📦 1 file HTML💻 Individuale

Lista di task riordinabile con sortable

Crea una lista di 5 elementi resa riordinabile con sortable(), che stampa in console il nuovo ordine ogni volta che l'utente trascina un elemento.

⏱ 20 min📦 1 file HTML💻 Individuale

jQuery UI — Widget interattivi su jQuery

Report Quiz

🎓 Attestato di Competenze sbloccato!