JqueryUI - Barra di avanzamento
Le barre di avanzamento indicano la percentuale di completamento di un'operazione o di un processo. Possiamo classificare la barra di avanzamento comedeterminate progress bar e indeterminate progress bar.
Determinate progress bardeve essere utilizzato solo in situazioni in cui il sistema può aggiornare accuratamente lo stato corrente. Una determinata barra di avanzamento non dovrebbe mai riempirsi da sinistra a destra, quindi tornare indietro fino a vuoto per un singolo processo.
Se lo stato effettivo non può essere calcolato, un file indeterminate progress bar dovrebbe essere utilizzato per fornire feedback agli utenti.
jQueryUI fornisce un widget della barra di avanzamento di facile utilizzo che possiamo utilizzare per far sapere agli utenti che la nostra applicazione è al lavoro per eseguire l'operazione richiesta. jQueryUI fornisce il metodo progressbar () per creare barre di avanzamento.
Sintassi
Il progressbar() metodo può essere utilizzato in due forme:
$ (selettore, contesto) .progressbar (opzioni) Metodo
Il metodo progressbar (opzioni) dichiara che un elemento HTML può essere gestito sotto forma di barra di avanzamento. Il parametro options è un oggetto che specifica l'aspetto e il comportamento delle barre di avanzamento.
Sintassi
$(selector, context).progressbar (options);Puoi fornire una o più opzioni alla volta utilizzando l'oggetto Javascript. Se ci sono più opzioni da fornire, le separerai usando una virgola come segue:
$(selector, context).progressbar({option1: value1, option2: value2..... });La tabella seguente elenca le diverse opzioni che possono essere utilizzate con questo metodo:
| Sr.No. | Opzione e descrizione |
|---|---|
| 1 | Disabilitato Questa opzione, se impostata su true, disabilita le barre di avanzamento. Per impostazione predefinita, il suo valore èfalse. Option - disabled Questa opzione, se impostata su true, disabilita le barre di avanzamento. Per impostazione predefinita, il suo valore èfalse. Syntax |
| 2 | max Questa opzione imposta il valore massimo per una barra di avanzamento. Per impostazione predefinita, il suo valore è100. Option - max Questa opzione imposta il valore massimo per una barra di avanzamento. Per impostazione predefinita, il suo valore è100. Syntax |
| 3 | valore Questa opzione specifica il valore iniziale della barra di avanzamento. Per impostazione predefinita, il suo valore è0. Option - value Questa opzione specifica il valore iniziale della barra di avanzamento. Per impostazione predefinita, il suo valore è0. Syntax |
La sezione seguente ti mostrerà alcuni esempi di funzionamento della funzionalità della barra di avanzamento.
Funzionalità predefinita
L'esempio seguente mostra un semplice esempio di funzionalità della barra di avanzamento, senza passare parametri al file progressbar() metodo.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI ProgressBar functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.ui-widget-header {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
font-weight: bold;
}
</style>
<script>
$(function() {
$( "#progressbar-1" ).progressbar({
value: 30
});
});
</script>
</head>
<body>
<div id = "progressbar-1"></div>
</body>
</html>Salviamo il codice sopra in un file HTML progressbarexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:
Questo esempio mostra la creazione della barra di avanzamento utilizzando il metodo progressbar () . Questa è una barra di avanzamento determinata per impostazione predefinita.
Uso di max e value
L'esempio seguente mostra l'utilizzo di due opzioni values e max nella funzione progressbar di JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI ProgressBar functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.ui-widget-header {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
font-weight: bold;
}
</style>
<script>
$(function() {
var progressbar = $( "#progressbar-2" );
$( "#progressbar-2" ).progressbar({
value: 30,
max:300
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 3000 );
});
</script>
</head>
<body>
<div id = "progressbar-2"></div>
</body>
</html>Salviamo il codice sopra in un file HTML progressbarexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:
Qui puoi vedere che la barra di avanzamento si riempie da destra a sinistra e si ferma quando il valore raggiunge 300.
$ (selector, context) .progressbar ("action", params) Metodo
Il metodo progressbar ("action", params) può eseguire un'azione sulla barra di avanzamento, come cambiare la percentuale di riempimento. L'azione è specificata come una stringa nel primo argomento (ad esempio, "valore" per modificare la percentuale di riempimento). Controlla le azioni che possono essere trasmesse, nella tabella seguente.
Sintassi
$(selector, context).progressbar ("action", params);;La tabella seguente elenca le diverse azioni che possono essere utilizzate con questo metodo:
| Sr.No. | Azione e descrizione |
|---|---|
| 1 | distruggere Questa azione rimuove completamente la funzionalità della barra di avanzamento di un elemento. Gli elementi tornano al loro stato pre-inizializzazione. Questo metodo non accetta argomenti. Action - destroy Questa azione rimuove completamente la funzionalità della barra di avanzamento di un elemento. Gli elementi tornano al loro stato pre-inizializzazione. Questo metodo non accetta argomenti. Syntax |
| 2 | distruggere Questa azione rimuove completamente la funzionalità della barra di avanzamento di un elemento. Gli elementi tornano al loro stato pre-inizializzazione. Questo metodo non accetta argomenti. Action - destroy Questa azione rimuove completamente la funzionalità della barra di avanzamento di un elemento. Gli elementi tornano al loro stato pre-inizializzazione. Questo metodo non accetta argomenti. Syntax |
| 3 | disattivare Questa azione disabilita la funzionalità della barra di avanzamento di un elemento. Questo metodo non accetta argomenti. Action - disable Questa azione disabilita la funzionalità della barra di avanzamento di un elemento. Questo metodo non accetta argomenti. Syntax |
| 4 | abilitare Questa azione abilita la funzionalità della barra di avanzamento. Questo metodo non accetta argomenti. Action - enable Questa azione abilita la funzionalità della barra di avanzamento. Questo metodo non accetta argomenti. Syntax |
| 5 | opzione (optionName) Questa azione recupera il valore attualmente associato a optionName specificato . Dove optionName è una stringa. Action - option( optionName ) Questa azione recupera il valore attualmente associato a optionName specificato . Dove optionName è una stringa. Syntax |
| 6 | opzione Questa azione ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni della barra di avanzamento corrente. Questo metodo non accetta argomenti. Action - option Questa azione ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni della barra di avanzamento corrente. Questo metodo non accetta argomenti. Syntax |
| 7 | opzione (optionName, value) Questa azione imposta il valore dell'opzione della barra di avanzamento associata all'opzione optionName specificato . Action - option( optionName, value ) Questa azione imposta il valore dell'opzione della barra di avanzamento associata all'opzione optionName specificato . L'argomento optionName è il nome dell'opzione da impostare e valore è il valore da impostare per l'opzione. Syntax |
| 8 | opzione (opzioni) Questa azione imposta una o più opzioni per le barre di avanzamento. L'argomento opzioni è una mappa di coppie opzione-valore da impostare. Action - option( options ) Questa azione imposta una o più opzioni per le barre di avanzamento. L'argomento opzioni è una mappa di coppie opzione-valore da impostare. Syntax |
| 9 | valore Questa azione recupera il valore corrente di options.value , ovvero la percentuale di riempimento nella barra di avanzamento. Action - value Questa azione recupera il valore corrente di options.value , ovvero la percentuale di riempimento nella barra di avanzamento. Syntax |
| 10 | valore (valore) Questa azione specifica un nuovo valore per la percentuale inserita nella barra di avanzamento. Il valore dell'argomento può essere un numero o un booleano. Action - value( value ) Questa azione specifica un nuovo valore per la percentuale inserita nella barra di avanzamento. Il valore dell'argomento può essere un numero o un booleano. Syntax |
| 11 | aggeggio Questa azione restituisce un oggetto jQuery contenente la barra di avanzamento. Questo metodo non accetta argomenti. Action - widget Questa azione restituisce un oggetto jQuery contenente la barra di avanzamento. Questo metodo non accetta argomenti. Syntax |
Esempio
Vediamo ora un esempio usando le azioni della tabella sopra. Il seguente esempio dimostra l'uso dei metodi disable () e option (optionName, value) .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI ProgressBar functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.ui-widget-header {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
font-weight: bold;
}
</style>
<script>
$(function() {
$( "#progressbar-3" ).progressbar({
value: 30
});
$( "#progressbar-3" ).progressbar('disable');
$( "#progressbar-4" ).progressbar({
value: 30
});
var progressbar = $( "#progressbar-4" );
$( "#progressbar-4" ).progressbar( "option", "max", 1024 );
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 3000 );
});
</script>
</head>
<body>
<h3>Disabled Progressbar</h3>
<div id = "progressbar-3"></div><br>
<h3>Progressbar with max value set</h3>
<div id = "progressbar-4"></div>
</body>
</html>Salviamo il codice sopra in un file HTML progressbarexample.htm e aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output: