Nelle applicazioni desktop ci imbattiamo spesso in barre di progresso che hanno il duplice compito di mantenere viva l'attenzione dell'utente (dare feedback) e indicare con una certa approssimazione quanta parte di un'operazione è stata compiuta.
Per consuetudine ormai acquisita, una barra di progresso viene interpretata dall'utente come la rappresentazione grafica di un valore percentuale.
Il problema maggiore con questo tipo di controllo utente è che per rappresentare realmente una percentuale è necessario conoscere in precedenza il valore finale che dovrà essere raggiunto. Sul web tale valore può rappresentare una dimensione fisica oppure un lasso di tempo: in entrambi i casi non sempre è possibile reperire questi dati.
Proprio per questo, nella maggior parte dei casi viene preferito come feedback per l'utente uno spinner, ovvero un'animazione in gif che richiami l'idea di attesa e caricamento.
Proprio per questi motivi, l'uso del widget progressbar in jQuery UI è indicato soprattutto come feedback visivo del completamento di passaggi successivi in un'operazione complessa. L'esempio tipico è la compilazione di un modulo di registrazione ad un sito: se il modulo richiede la compilazione di molti campi è preferibile spezzare l'operazione in sottogruppi più piccoli ed utilizzare una barra di progresso per indicare all'utente quanto manca alla fine.
Nella sua forma più semplice una progressbar viene attivata con il seguente codice:
$('#barra').progressbar();In questo modo all'elemento #barra verrà applicato il tema specifico di jQuery UI che renderà la barra di progresso scalabile (cioè si adatterà al cambiamento di dimensione del contenitore) e soprattutto aggiornabile con facilità. Ecco un esempio pratico di utilizzo del widget.
Opzioni
L'unica opzione offerta da progressbar è value che permette di impostare e aggiornare il valore percentuale di completamento nella barra:
// inizializzo la barra al 25%
$('#barra').progressbar({value : 25});
// aggiorno la barra al 50%
$('#barra').progressbar('value', 50);Eventi
Progressbar offre un unico evento change che viene lanciato quando il valore della barra cambia.
Metodi
Oltre ai metodi comuni a tutti i widget di UI, progressbar offre un metodo specifico value che può essere usato per impostare o ricavare il valore della barra:
$('#barra').progressbar('value', 70);