Uso di widget e componenti di jQuery UI

L’utilizzo dei widget jQuery UI è sorprendentemente semplice. Dopo aver incluso jQuery e jQuery UI nel tuo progetto, puoi iniziare ad applicare i widget agli elementi del DOM. Ecco alcuni esempi:

Datepicker in jQuery UI

Il Datepicker è un calendario interattivo che può essere collegato a un campo di input:

<input type="text" id="datepicker">
<script>
$( "#datepicker" ).datepicker();
</script>

Dialog in jQuery UI

Crea una finestra di dialogo modale o non modale:

<div id="dialog" title="Basic dialog">
  <p>Questo è un dialogo di esempio.</p>
</div>
<script>
$( "#dialog" ).dialog();
</script>

Tabs in jQuery UI

Organizza il contenuto in schede interattive:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Prima</a></li>
    <li><a href="#tabs-2">Seconda</a></li>
    <li><a href="#tabs-3">Terza</a></li>
  </ul>
  <div id="tabs-1">
    <p>Contenuto della prima scheda</p>
  </div>
  <div id="tabs-2">
    <p>Contenuto della seconda scheda</p>
  </div>
  <div id="tabs-3">
    <p>Contenuto della terza scheda</p>
  </div>
</div>
<script>
$( "#tabs" ).tabs();
</script>

Personalizzazione dei Widget di jQuery UI

Una delle caratteristiche più potenti di jQuery UI è la sua personalizzabilità. Puoi modificare l’aspetto e il comportamento dei widget utilizzando opzioni, metodi e eventi specifici di ciascun widget.

Opzioni dei widget in jQuery UI

Ogni widget ha un set di opzioni che possono essere configurate. Ad esempio, puoi impostare il formato della data nel Datepicker:

$("#datepicker").datepicker({
    dateFormat: "yy-mm-dd"
});

Metodi dei widget in jQuery UI

I widget offrono anche metodi per eseguire azioni specifiche. Per esempio, puoi aprire programmaticamente un dialogo:

$("#dialog").dialog("open");

Eventi dei widget in jQuery UI

Puoi collegare funzioni agli eventi dei widget per eseguire azioni quando accade qualcosa di specifico. Ad esempio, puoi eseguire una funzione quando una nuova data viene selezionata nel Datepicker:

$("#datepicker").datepicker({
    onSelect: function(dateText, inst) {
        console.log("Data selezionata: " + dateText);
    }
});