Latest web development tutorials

jQuery UI esempio - barra di avanzamento (Progressbar)

Visualizzare un certo processo o stato di incertezza.

Per ulteriori dettagli sui membro ProgressBar, consultare la documentazione API membro barra di avanzamento (Progressbar il Widget) .

La funzione di default

L'impostazione predefinita è determinata barra di avanzamento. 

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Titolo> jQuery UI barra di avanzamento (Progressbar) - La funzione di default </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
  <Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#progressbar") .progressbar ({
      Valore: 37
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "progressbar"> </ div>
 
 
</ Corpo>
</ Html>

etichette personalizzate

Etichetta aggiornamento personalizzato. 

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Titolo> jQuery UI barra di avanzamento (Progressbar) - scheda personalizzata </ ​​title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
  <Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .ui-progressbar {
    position: relative;
  }
  .progress-label {
    position: absolute;
    sinistra: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
  }
  </ Style>
  <Script>
  $ (Function () {
    var progressbar = $ ( "#progressbar"),
      progressLabel = $ ( ".progress-label");
 
    progressbar.progressbar ({
      Valore: falso,
      cambiare: function () {
        progressLabel.text (progressbar.progressbar ( "valore") + "%");
      },
      completare: function () {
        progressLabel.text ( "Complete!");
      }
    });
 
    progresso function () {
      var = val progressbar.progressbar ( "valore") || 0;
 
      progressbar.progressbar ( "valore", val + 1);
 
      if (val <99) {
        setTimeout (progresso, 100);
      }
    }
 
    setTimeout (progresso, 3000);
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "progressbar"> <div class = "progresso-label"> Caricamento ... </ div> </ div>
 
 
</ Corpo>
</ Html>

valore indeterminato

Indeterminato barra di avanzamento, e può passare tra stile certo ed incerto. 

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Titolo> jQuery UI barra di avanzamento (Progressbar) - Valore indeterminato </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
  <Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#progressbar") .progressbar ({
      Valore: false
    });
    $ ( "Button") .on ( "click", la funzione (evento) {
      var target = $ (event.target),
        progressbar = $ ( "#progressbar"),
        progressbarValue = progressbar.find ( ".ui-progressbar-value");
 
      if (target.is ( "#numButton")) {
        progressbar.progressbar ( "opzione", {
          Valore: Math.floor (Math.random () * 100)
        });
      } Else if (target.is ( "#colorButton")) {
        progressbarValue.css ({
          "Background": '#' + Math.floor (Math.random () * 16777215) .toString (16)
        });
      } Else if (target.is ( "#falseButton")) {
        progressbar.progressbar ( "opzione", "valore", false);
      }
    });
  });
  </ Script>
  <Style>
  #progressbar .ui-progressbar valore {
    background-color: #ccc;
  }
  </ Style>
</ Head>
<Body>
 
<Div id = "progressbar"> </ div>
<Button id = "pulsante numerico"> valore casuale - OK <button />
<Button id = "falseButton"> che <tasto />
<Pulsante ID = ""> ColorButton colori casuali </ button>
 
 
</ Corpo>
</ Html>