Latest web development tutorials

jQuery UI API - membro barra di avanzamento (Progressbar Widget)

categoria

Widget (Widget)

uso

Descrizione: Visualizzazione uno stato processo determinato o indeterminato.

Nuova versione: 1.6

Una barra di avanzamento è stato progettato per mostrare la percentuale di completamento dei progressi in corso. Una barra di avanzamento da CSS codifica flessibilità per regolare la dimensione, il valore predefinito sarà ridimensionata per adattarsi alle dimensioni del contenitore principale.

Determinare una barra di avanzamento può essere utilizzato solo nel sistema può aggiornare accuratamente lo stato corrente del caso. Determinare una barra di avanzamento non si riempirà da sinistra a destra, poi ritorna indietro vuoto - se non è possibile calcolare lo stato attuale, utilizzare la barra di avanzamento indeterminata al fine di fornire il feedback degli utenti.

tematizzazione

Un membro barra di avanzamento (Progressbar Widget) utilizzando framework jQuery UI CSS per definire l'aspetto del suo stile. Se è necessario utilizzare la barra di avanzamento in stile specificato, è possibile utilizzare il seguente nome della classe CSS:

  • ui-progressbar : l'avanzamento del contenitore esterno. Questo elemento di incertezza aggiungerà un ulteriore barra di avanzamento ui-progressbar-indeterminate , di classe.
    • ui-progressbar-value : Questo elemento rappresenta lo stato di avanzamento della porzione di riempimento.
      • ui-progressbar-overlay : overlay per la visualizzazione di animazione è indeterminata barra di avanzamento.

fare affidamento

Ulteriori informazioni

  • La parte richiede un po 'di CSS funzionale, altrimenti non funzionerà. Se si crea un tema personalizzato, utilizzare il file CSS widget di specificato come punto di partenza.

Esempi

Un semplice jQuery UI barra di avanzamento indeterminata (Indeterminato Progressbar). 

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> membro barra di avanzamento (Progressbar Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Src = "script // code.jquery.com/jquery-1.10.2.js"> </ script>
  <Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Body>
 
<Div id = "progressbar"> </ div>
 
<Script>
$ ( "#progressbar") .progressbar ({
  Valore: false
});
</ Script>
 
</ Corpo>
</ Html>