Share
La barra di avanzamento è uno dei componenti più recenti da aggiungere all'eccellente libreria di widget dell'interfaccia utente e helper di interazione creati su jQuery. È stato introdotto nell'ultima versione della libreria, che al momento della scrittura è 1.7.
La barra di avanzamento è attualmente solo determinata, il che significa che quando la aggiorniamo, dobbiamo dire esplicitamente qual è il suo valore, e dobbiamo sapere in anticipo quando il processo per misurare è completo. Questo widget non è attualmente la scelta migliore per un processo che richiederà un lasso di tempo indeterminato.
È un widget molto semplice con una piccola API che espone un numero limitato di proprietà e metodi, ma può ancora essere molto efficace ed è ottimo per fornire un feedback visivo ai visitatori sulla percentuale di un processo che rimane prima che sia completa.
Avremo bisogno di una copia della versione corrente dell'interfaccia utente jQuery, che può essere ottenuta dal builder di download all'indirizzo http://jqueryui.com/download. Una volta scaricato, dovremo decomprimerlo in modo che la struttura della directory esistente sia preservata. Dovremmo creare una nuova directory sul nostro computer chiamata interfaccia utente jQuery e quindi creare un'altra nuova cartella denominata jqueryui1.7. L'archivio dovrebbe quindi essere decompresso nella cartella jqueryui1.7.
L'archivio conterrà tutto ciò di cui abbiamo bisogno per iniziare; versioni miniate e non compresse di tutti i file della libreria, alcuni file di temi (il tema predefinito è la levigatezza con nome appropriato) e anche l'ultima versione della libreria jQuery sottostante.
La barra di avanzamento si basa su un numero di file per funzionare; questi sono elencati di seguito nell'ordine in cui dovrebbero essere aggiunti alla nostra pagina:
I primi tre file fanno parte del vasto framework CSS e vengono utilizzati per conferire alla barra di avanzamento il suo aspetto distinto. Non è necessario attenersi a questo tema in un'implementazione del mondo reale; abbiamo molte opzioni per la personalizzazione tra cui un numero enorme di temi preconfigurati disponibili direttamente da Themeroller, un tema personalizzato che possiamo progettare noi stessi usando Themeroller, o anche un tema personalizzato che creiamo manualmente superando le regole definite nei fogli di stile di default. Non faremo nessuna di queste cose in questo tutorial, ma possiamo usare alcune delle classi fornite dal framework.
Questo widget richiede pochissimo mark-up sottostante; tutto ciò di cui abbiamo bisogno, oltre alle risorse di libreria elencate sopra, è un semplice elemento contenitore. Nell'editor di testo, creare la shell di pagina seguente con le risorse e l'elemento contenitore necessari:
Barra di avanzamento dell'interfaccia utente jQuery
Salva questo come progressBar.html nella directory principale di jQuery UI. Mettiamo i fogli di stile all'inizio del file e gli script proprio alla fine; questo è per motivi di prestazioni poiché le pagine caricano il contenuto più rapidamente quando non provano a caricare JavaScript nello stesso momento. Questa è una pratica prestazionale ben documentata alla quale si aderisce meglio. Abbiamo lasciato un tag script vuoto nella parte inferiore della pagina; aggiungiamo un po 'di codice lì dopo:
Accentsconagua
$ (function () // chiama il costruttore della barra di avanzamento $ ("# container"). progressbar ();); Per inizializzare la barra di avanzamento predefinita, tutto ciò che facciamo è chiamare il suo metodo di costruzione, barra di avanzamento, sull'elemento contenitore in cui deve essere eseguito il rendering del widget. Quando si esegue questa pagina nel browser, si dovrebbe vedere che la barra di avanzamento è stata creata e riempie automaticamente la larghezza del suo contenitore, che in questo caso è il corpo della pagina:
Il valore della barra di avanzamento verrà impostato su zero per impostazione predefinita, motivo per cui appare vuoto nella schermata precedente. Per riempire la barra di avanzamento, dobbiamo impostare la proprietà value; cambia la funzione di costruzione in modo che appaia come segue:
// chiama progress bar constructor $ ("# container"). progressbar (value: 50); La proprietà value determina la percentuale della barra di avanzamento che viene riempita, dando un grande riscontro visivo al visitatore sulla quantità di attività da completare. Ora la barra di avanzamento dovrebbe essere riempita a metà, come nella seguente schermata:
Ottenere il valore corrente del widget è facile come lo era per impostarlo; possiamo usare uno dei suoi metodi per restituire la proprietà del valore corrente. Dopo il costruttore iniziale, aggiungi il seguente codice:
// imposta il mouseover per la barra di avanzamento
$ ("# container"). mouseover (function () // mostra il valore corrente $ ("") .attr (" id "," percentuale "). text ($ (" # container "). progressbar (" option "," value ") +"% complete ") append appendTo (" body ");) ; // imposta il mouseout per la barra di avanzamento $ ("# container"). mouseout (function () // nasconde valore $ ("# percentuale"). remove (););
Abbiamo aggiunto due semplici funzioni anonime che vengono attivate sugli eventi mouseover e mouseout attivati dalla barra di avanzamento (si noti che si tratta di eventi DOM standard e non di eventi personalizzati). Tutto ciò che facciamo nella prima funzione è creare un nuovo paragrafo con il valore corrente della barra di avanzamento come suo InnerText e aggiungerlo alla pagina.
Il valore viene recuperato utilizzando il metodo opzione. L'argomento passato al metodo è il nome della proprietà che vorremmo recuperare. La seconda funzione rimuove semplicemente di nuovo il messaggio. Il messaggio è mostrato nello screenshot seguente:
La proprietà value, o opzione, è attualmente l'unica proprietà configurabile della barra di avanzamento; in questo esempio lo impostiamo quando il widget viene inizializzato passandolo come proprietà di un oggetto di configurazione. Per impostare questa proprietà dopo che il widget è stato inizializzato, useremo il metodo opzione. Per utilizzare questo metodo in modalità setter, dobbiamo passare un secondo parametro specificando il nuovo valore, come questo:
progressbar ("opzione", "valore", 75) Ci si potrebbe chiedere perché ho detto "un secondo parametro" quando chiaramente ci sono tre argomenti nella riga di codice sopra. Anche se stiamo usando il metodo opzione, in realtà non lo chiamiamo direttamente. Invece chiamiamo di nuovo il metodo del costruttore, ma diciamo che vorremmo chiamare il metodo dell'opzione. Il widget chiamerà internamente il metodo, passando i due parametri ("valore" e 75) che passiamo al costruttore dopo il nome del metodo.
La barra di avanzamento espone un singolo evento, l'evento change, che fornisce un meccanismo in cui possiamo agganciarci in modo da poter rispondere ai cambiamenti nel suo valore. Questo è un evento personalizzato in modo che possiamo rilevare e reagire in due modi diversi. Possiamo definire una funzione anonima come valore della proprietà change in un oggetto di configurazione, come abbiamo fatto con la proprietà value, oppure possiamo usare il metodo bind di jQuery per specificare la funzione anonima da eseguire. Una sottile differenza tra i due è che il codice specificato usando il metodo bind verrà eseguito per primo.
L'API della barra di avanzamento espone cinque metodi, elencati di seguito:
Tutti questi metodi sono utilizzati esattamente nello stesso modo del metodo di opzione che abbiamo visto; chiamando il metodo del costruttore che specifica il nome del metodo e tutti i parametri che vorremmo passare. La maggior parte di questi dovrebbe essere abbastanza auto-esplicativa.
Questo esempio finora è stato molto di base, per quelli di voi che potrebbero non aver usato l'interfaccia utente di jQuery in precedenza. Facciamo un po 'di cose e mettiamo insieme qualcosa che si avvicina al genere di cose che vorremmo fare in una corretta implementazione. Anche questo esempio sarà di base, ma dovrebbe dare un'idea molto migliore di come il widget può essere fatto funzionare per noi. La nostra pagina finita apparirà in questo modo:
Inizia con la seguente pagina sottostante in un nuovo file nel tuo editor di testo:
Barra di avanzamento dell'interfaccia utente jQuery Formulario di registrazione
Progresso:
