Introduzione alla barra di avanzamento di JQuery

Le barre di avanzamento sono un elemento jQueryUI. Considerando che sappiamo che jQuery è una libreria JavaScript, che viene utilizzata nel codice html e che la ragione per utilizzare jQuery in un codice html viene utilizzata per creare o sviluppare facilmente componenti dell'interfaccia utente (interfaccia utente) tramite javascript. Quindi, con l'aiuto di jQuery, possiamo rendere il nostro sito Web non solo più attraente e anche più interattivo. La barra di avanzamento è anche uno dei componenti dell'interfaccia utente jQuery, utilizzato per mostrare lo stato di completamento dell'attività o del processo in percentuale.

Possiamo mostrare la barra di avanzamento in due forme come "barra di avanzamento determinata" e "barra di avanzamento indeterminata".

  1. Determinare la barra di avanzamento: determinare la barra di avanzamento che utilizziamo in uno scenario in cui possiamo mostrare l'esatto progresso o lo stato dell'attività. Ad esempio numeri di file inviati, percentuale della copia dei dati, percentuale del download del file, ecc. Poiché la barra di avanzamento Determinazione può mostrare i progressi nella percentuale del numero di modulo come 54%, oppure la riga ha riempito il modulo da sinistra a destra.
  2. Barra di avanzamento indeterminata: barra di avanzamento indeterminata che utilizziamo in uno scenario in cui l'esatto progresso o lo stato dell'attività sono sconosciuti o non possono essere determinati. Ad esempio, non possiamo determinare i progressi quando procede la richiesta di connessione al server.

Sintassi del metodo progressbar ()

Il metodo progressbar () può essere utilizzato in due forme:

  • $ (elemento, cont). metodo progressbar (opzione)
  • $ (elemento, cont). metodo progressbar ("azione", parametri)

L'elemento per il quale dobbiamo gestire l'avanzamento, possiamo applicare $ (element, cont). metodo progressbar (opt) sull'elemento html e gestito sotto forma di barra di avanzamento. Considerando che l'opzione è un parametro utilizzato per passare i diversi valori per specificare come le barre di avanzamento devono essere comportamento e apparire. Ad esempio $ ("#elementid") .progressbar ((valore: 30)), qui value è un'opzione e 30 è il valore fornito per l'opzione value.

Allo stesso modo, non possiamo passare solo un'opzione, ma possiamo anche passare più di un'opzione solo ciascuna opzione separata dalla virgola come indicato di seguito -

$ (selettore, contesto) .progressbar ((opzione1: valore1, opzione2: valore2… ..));

Le diverse opzioni che possiamo passare alla barra di avanzamento sono riportate di seguito -

  • disabilitato - L'opzione disabilitata se impostata su true, disabilita le barre di avanzamento e false è un valore predefinito di disabilitato.
  • max - L'opzione max imposta il valore massimo per una barra di avanzamento. Il valore predefinito di max è 100.
  • valore - L'opzione valore utilizzata per impostare il valore iniziale della barra di avanzamento. Il valore predefinito di valore è 0.

Esempi di barra di avanzamento di JQuery

La funzionalità predefinita del metodo progressbar () -

Quindi, iniziamo alcuni degli esempi sulla barra di avanzamento per comprenderne la funzionalità. Innanzitutto, scriviamo alcuni esempi per vedere la funzionalità predefinita della barra di avanzamento senza passare alcun parametro al metodo progressbar (). Poiché la barra di avanzamento è un elemento dell'interfaccia utente jQuery, quindi il primo passo è includere i file esterni jquery specificando l'attributo src dell'elemento.

Esempio di programma n. 1



My first jQuery UI Progress Bar example program

rel = "stylesheet">
.ui (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)

$(function() (
$( "#pbid" ).progressbar((
));
));

My first jQuery UI Progress Bar example program

rel = "stylesheet">
.ui (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)

$(function() (
$( "#pbid" ).progressbar((
));
));

Questa è la funzionalità predefinita della barra di avanzamento

Produzione -

Successivamente, utilizziamo l'opzione value e la passiamo a 40, il che indica che l'avanzamento del 40% nella barra di avanzamento come indicato nel codice seguente -

Esempio di programma n. 2



My first jQuery UI Progress Bar example program

rel = "stylesheet">
.ui (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)

$(function() (
$( "#pbid" ).progressbar(( value : 40
));
));

My first jQuery UI Progress Bar example program

rel = "stylesheet">
.ui (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)

$(function() (
$( "#pbid" ).progressbar(( value : 40
));
));

Questa è la funzionalità predefinita della barra di avanzamento

Produzione -

Successivamente, impostiamo le opzioni di valore massimo e di valore rispettivamente sul 400 e 40% nel metodo progressbar di JqueryUI.

Esempio di programma n. 3


My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
$( "#pbid" ).progressbar((
value: 40,
max:400
));
var pb = $( "#pbid" );
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 4000 );
));

.ui(
background: blue;
color: #333333;
border: 2px solid #DDDDDD;
font-weight: bold;
)
My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
$( "#pbid" ).progressbar((
value: 40,
max:400
));
var pb = $( "#pbid" );
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 4000 );
));

.ui(
background: blue;
color: #333333;
border: 2px solid #DDDDDD;
font-weight: bold;
)

Questo è l'esempio della barra di avanzamento per max = 400 e valori = 40%

Produzione -

La barra di avanzamento inizia il riempimento da sinistra a destra e si interrompe quando ha raggiunto 400. Se nessun valore prevede l'opzione massima, il riempimento si arresta solo all'estremità destra.

L'elemento per il quale dobbiamo gestire l'avanzamento, possiamo applicare il metodo $ (element, cont) .progressbar (“azione”, params) sull'elemento html per gestire ed eseguire un'azione sulla barra di avanzamento. sotto forma di una barra di avanzamento. L'azione è un parametro specificato come stringa nel primo argomento. Ad esempio $ (“#elementid”) .progressbar ('disable'), qui disabilita l'opzione disabilita la barra di avanzamento.

Alcune delle azioni che possono essere passate, nel metodo $ (element, cont) .progressbar (“action”, params) sono riportate di seguito -

  • distruggere: l'azione di distruzione da utilizzare per rimuovere completamente la funzionalità della barra di avanzamento di un elemento e tornare allo stato pre-init di un elemento. È un metodo a argomento zero.
  • disabilita: l'azione disabilita disabilita la funzionalità della barra di avanzamento dell'elemento. È un metodo a argomento zero.
  • abilita: l'azione abilita abilita la funzionalità della barra di avanzamento dell'elemento. È un metodo a argomento zero.
  • opzione (opzione): l'azione dell'opzione (opzione) consente di ottenere valore dall'elemento specificato. Accetta un'opzione argomento, che è una stringa.
  • opzione: le opzioni utilizzate dall'azione per ottenere un'opzione della barra di avanzamento sotto forma di coppie chiave: valore. È un metodo a argomento zero.
  • opzione (opzione, valore): l'azione dell'opzione (opzione, valore) consente di impostare il valore dell'opzione della barra di avanzamento associata all'opzione specificata.
  • opzione (opzioni): l'azione dell'opzione (opzioni) consente di impostare una o più opzioni per le barre di avanzamento. Accetta un'opzione argomento che è una mappa per coppie valore-opzione.
  • valore - L'azione valore utilizzata per ottenere il valore delle opzioni. Il valore indica la percentuale di riempimento nella barra di avanzamento.
  • valore (valore): l'azione valore (valore) consente di impostare un nuovo valore per la percentuale da compilare nella barra di avanzamento. Accetta un valore argomento che è numero.
  • widget: l'azione del widget utilizzata per ottenere l'elemento su cui viene applicata la barra di avanzamento. È un metodo a argomento zero.

Successivamente, vediamo alcuni esempi della barra di avanzamento con alcune azioni che sono menzionate sopra. Consente di vedere il programma seguente per il metodo progressbar () con l'azione disable () e l'opzione (optionName, value).

Esempio di programma n. 4



My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
$( "#pbid1" ).progressbar((
value: 40
));
$( "#pbid1" ).progressbar('disable');
$( "#pbid2" ).progressbar((
value: 40
));
var pb = $( "#pbid2" );
$( "#pbid2" ).progressbar( "option", "max", 400 );
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 400 );
));

.ui (
background: blue;
border: 1px solid #DDDDDD;
font-weight: bold;
color: #333333;
)

My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
$( "#pbid1" ).progressbar((
value: 40
));
$( "#pbid1" ).progressbar('disable');
$( "#pbid2" ).progressbar((
value: 40
));
var pb = $( "#pbid2" );
$( "#pbid2" ).progressbar( "option", "max", 400 );
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 400 );
));

.ui (
background: blue;
border: 1px solid #DDDDDD;
font-weight: bold;
color: #333333;
)

Questo è l'esempio della barra di avanzamento per Disabilita azione



Questo è l'esempio della barra di avanzamento per l'azione max e value

Produzione -

La barra di avanzamento sopra è disabilitata ed è per questo che non mostra l'avanzamento e la barra di avanzamento sotto imposta l'opzione di valore massimo e con alcuni valori, quindi l'avanzamento sotto forma di riempimento viene visualizzato da sinistra a destra.

L'indicatore di stato gestisce gli eventi -

Oltre a quanto sopra, la barra di avanzamento può essere gestita anche dall'evento. L'interfaccia utente di jQuery fornisce il metodo dell'evento, l'evento viene attivato per un determinato evento. Di seguito sono riportati alcuni degli eventi che è possibile utilizzare per gestire la barra di avanzamento:

  • change (event, ui) - Ogni volta che il valore della barra di avanzamento cambia o cambia di progresso questo evento viene attivato.
  • complete (evento, ui) - Quando l'avanzamento ar raggiunge la fine o raggiunge il valore massimo, questo evento viene generato.
  • create (event, ui) - Ogni volta che viene creata la barra di avanzamento, questo evento viene attivato.

Quindi, scrivi alcuni degli esempi dell'azione sopra descritta. L'esempio seguente mostra l'utilizzo del metodo dell'evento durante la funzionalità della barra di avanzamento. Questo esempio dimostra l'uso degli eventi per modificare e completare.

Esempio di programma n. 5



My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
pl = $( ".pbc" );
var pb = $( "#pbid" );
$( "#pbid" ).progressbar((
value: false,
change: function() (
pl.text(
pb.progressbar( "value" ) + "%" );
),
complete: function() (
pl.text( "Loading Completed!" );
)
));
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 3000 );
));

.ui-widget-header (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)
.progress-label (
position: absolute;
top: 13px;
left: 50%;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
)

My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
pl = $( ".pbc" );
var pb = $( "#pbid" );
$( "#pbid" ).progressbar((
value: false,
change: function() (
pl.text(
pb.progressbar( "value" ) + "%" );
),
complete: function() (
pl.text( "Loading Completed!" );
)
));
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 3000 );
));

.ui-widget-header (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)
.progress-label (
position: absolute;
top: 13px;
left: 50%;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
)

Questo è l'esempio della barra di avanzamento con evento



Caricamento in corso…

L'output del programma sopra è nella sequenza di esecuzione mostrata di seguito -

La barra di avanzamento inizia a riempirsi da sinistra a destra e si interrompe quando raggiunge la fine.

Conclusione

1. Le barre di avanzamento sono un elemento jQueryUI.

2. La barra di avanzamento viene utilizzata per mostrare l'attività o lo stato di completamento del processo in percentuale.

3. Il metodo progressbar () può essere utilizzato in due forme:

  • $ (elemento, cont). metodo progressbar (opzione)
  • $ (elemento, cont). metodo progressbar ("azione", parametri)

4. Le diverse opzioni che possiamo passare al metodo progressbar () sono:

Disabilitato

  • max
  • valore

5. Alcune delle azioni che possono essere passate, nel metodo $ (element, cont) .progressbar (“action”, params) sono -

  • distruggere
  • disattivare
  • abilitare
  • opzione
  • opzione (opzione, valore)
  • opzione (opzioni)
  • valore
  • valore (valore)
  • aggeggio

6. L'evento che può essere utilizzato per gestire la barra di avanzamento è riportato di seguito -

  • completo (evento, interfaccia utente)
  • creare (evento, interfaccia utente)
  • modifica (evento, interfaccia utente)

Articoli consigliati

Questa è una guida alla barra di avanzamento di JQuery. Qui discutiamo i metodi e gli esempi della barra di avanzamento di JQuery con la sintassi e l'output. Puoi anche dare un'occhiata ai seguenti articoli per saperne di più -

  1. Attributi jQuery
  2. Metodi jQuery Ajax
  3. Effetti jQuery
  4. Alternative jQuery
  5. Primi 5 tipi di Boostrap con codice di esempio
  6. Come creare un ProgressBar in JavaFX?

Categoria:

Sviluppo software