Latest web development tutorials

jQuery UI exemple - barre de progression (Progressbar)

Afficher un certain processus ou un état d'incertitude.

Pour plus de détails sur progressbar membre, consultez la documentation de l' API membre de barre de progression (Progressbar le Widget) .

La fonction par défaut

La valeur par défaut est déterminée barre de progression.

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery barre de progression de l'interface utilisateur (Progressbar) - La fonction par défaut </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// 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 ({
      Valeur: 37
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "progressbar"> </ div>
 
 
</ Body>
</ Html>

la

Étiquette personnalisée

étiquette de mise à jour personnalisée.

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI progrès bar (Progressbar) - onglet personnalisé </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// 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;
    gauche: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
  }
  </ Style>
  <Script>
  $ (Function () {
    var progressbar = $ ( "#progressbar"),
      progressLabel = $ ( ".progress-label");
 
    progressbar.progressbar ({
      valeur: false,
      changer: function () {
        progressLabel.text (progressbar.progressbar ( "value") + "%");
      },
      compléter: function () {
        progressLabel.text ( "Complete!");
      }
    });
 
    progrès function () {
      var val = progressbar.progressbar ( "value") || 0;
 
      progressbar.progressbar ( "valeur", val + 1);
 
      if (val <99) {
        setTimeout (progrès, 100);
      }
    }
 
    setTimeout (progrès, 3000);
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "progressbar"> <div class = "progrès label"> Chargement en cours ... </ div> </ div>
 
 
</ Body>
</ Html>

la

valeur indéterminés

barre de progression indéterminés, et peut basculer entre certains et incertains style.

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI progrès bar (Progressbar) - valeur indéterminée </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// 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 ({
      valeur: false
    });
    $ ( "Button") .on ( "click", function (event) {
      cible var = $ (event.target),
        progressbar = $ ( "#progressbar"),
        progressbarValue = progressbar.find ( "-progressbar valeur .ui");
 
      if (target.is ( "#numButton")) {
        progressbar.progressbar ( "option", {
          Valeur: Math.floor (Math.random () * 100)
        });
      } Else if (target.is ( "#colorButton")) {
        progressbarValue.css ({
          "Contexte": '#' + Math.floor (Math.random () * 16777215) .toString (16)
        });
      } Else if (target.is ( "#falseButton")) {
        progressbar.progressbar ( "option", "valeur", false);
      }
    });
  });
  </ Script>
  <Style>
  #progressbar .ui-progressbar valeur {
    background-color: #ccc;
  }
  </ Style>
</ Head>
<Body>
 
<Div id = "progressbar"> </ div>
<Bouton id = "bouton numérique"> valeur aléatoire - OK </ button>
<Bouton id = "falseButton"> Sure </ button>
<Bouton id = ""> ColorButton couleurs aléatoires </ button>
 
 
</ Body>
</ Html>

la