Latest web development tutorials

jQuery UI API - membre de la barre de progression (Progressbar Widget)

catégorie

Widgets (Widgets)

usage

Description: Affiche un état du processus défini ou indéfini.

Nouvelle version: 1.6

Une barre de progression est conçu pour montrer le pourcentage d'achèvement de l'état d'avancement actuel. Une barre de progression par CSS flexibilité de codage pour ajuster la taille, la valeur par défaut sera réduite pour tenir compte de la taille du conteneur parent.

La détermination d'une barre de progression ne peut être utilisé dans le système peut mettre à jour avec précision l'état actuel de l'affaire. La détermination d'une barre de progression ne se remplit pas de gauche à droite, puis reboucle vide - si vous ne pouvez pas calculer l'état actuel, utilisez la barre de progression indéterminée afin de fournir les commentaires des utilisateurs.

theming

Un membre de la barre de progression (Progressbar Widget) en utilisant framework jQuery UI CSS pour définir l'aspect et la convivialité de son style. Si vous avez besoin d'utiliser la barre de progression de style spécifié, vous pouvez utiliser le nom de la classe CSS suivante:

  • ui-progressbar : les progrès du récipient extérieur. Cet élément d'incertitude va ajouter un progrès supplémentaire bar ui-progressbar-indeterminate , classe.
    • ui-progressbar-value : Cet élément représente la progression de la partie de remplissage.
      • ui-progressbar-overlay : superposition pour afficher l' animation est la barre de progression indéterminée.

Fiez

informations complémentaires

  • La partie exige une certaine CSS fonctionnelle, sinon cela ne fonctionnera pas. Si vous créez un thème personnalisé, utilisez le fichier CSS widget spécifié comme un point de départ.

Exemples

Une simple barre jQuery UI de progression indéterminée (indéterminés Progressbar). 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> élément de barre de progression (Progressbar Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Body>
 
<Div id = "progressbar"> </ div>
 
<Script>
$ ( "#progressbar") .progressbar ({
  valeur: false
});
</ Script>
 
</ Body>
</ Html>

la