JqueryUI - Barre de progression

Les barres de progression indiquent le pourcentage d'achèvement d'une opération ou d'un processus. Nous pouvons classer la barre de progression commedeterminate progress bar et indeterminate progress bar.

Determinate progress barne doit être utilisé que dans des situations où le système peut mettre à jour avec précision l'état actuel. Une barre de progression déterminée ne doit jamais se remplir de gauche à droite, puis revenir à vide pour un seul processus.

Si l'état réel ne peut être calculé, un indeterminate progress bar doit être utilisé pour fournir des commentaires aux utilisateurs.

jQueryUI fournit un widget de barre de progression facile à utiliser que nous pouvons utiliser pour informer les utilisateurs que notre application travaille d'arrache-pied pour effectuer l'opération demandée. jQueryUI fournit la méthode progressbar () pour créer des barres de progression.

Syntaxe

le progressbar() La méthode peut être utilisée sous deux formes -

$ (selector, context) .progressbar (options), méthode
$ (selector, context) .progressbar ("action", params), méthode

$ (selector, context) .progressbar (options), méthode

La méthode progressbar (options) déclare qu'un élément HTML peut être géré sous la forme d'une barre de progression. Le paramètre options est un objet qui spécifie l'apparence et le comportement des barres de progression.

Syntaxe

$(selector, context).progressbar (options);

Vous pouvez fournir une ou plusieurs options à la fois en utilisant un objet Javascript. S'il y a plus d'une option à fournir, vous les séparerez en utilisant une virgule comme suit -

$(selector, context).progressbar({option1: value1, option2: value2..... });

Le tableau suivant répertorie les différentes options pouvant être utilisées avec cette méthode -

N ° Sr.	Option et description
1	désactivée Cette option, lorsqu'elle est définie sur true, désactive les barres de progression. Par défaut, sa valeur estfalse. Option - disabled Cette option, lorsqu'elle est définie sur true, désactive les barres de progression. Par défaut, sa valeur estfalse. Syntax `$( ".selector" ).progressbar({ disabled: true });`
2	max Cette option définit la valeur maximale d'une barre de progression. Par défaut, sa valeur est100. Option - max Cette option définit la valeur maximale d'une barre de progression. Par défaut, sa valeur est100. Syntax `$( ".selector" ).progressbar({ max: 500});`
3	valeur Cette option spécifie la valeur initiale de la barre de progression. Par défaut, sa valeur est0. Option - value Cette option spécifie la valeur initiale de la barre de progression. Par défaut, sa valeur est0. Syntax `$( ".selector" ).progressbar({ value: 20 });`

La section suivante vous montrera quelques exemples fonctionnels des fonctionnalités de la barre de progression.

Fonctionnalité par défaut

L'exemple suivant montre un exemple simple de fonctionnalité de barre de progression, en ne passant aucun paramètre au progressbar() méthode.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI ProgressBar functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
            font-weight: bold;
         }
      </style>
      
      <script>
         $(function() {
            $( "#progressbar-1" ).progressbar({
               value: 30
            });
         });
      </script>
   </head>
   
   <body> 
      <div id = "progressbar-1"></div> 
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML progressbarexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -

Cet exemple montre la création de la barre de progression à l' aide de la méthode progressbar () . Il s'agit d'une barre de progression déterminée par défaut.

Utilisation de max et valeur

L'exemple suivant illustre l'utilisation de deux options values et max dans la fonction de barre de progression de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI ProgressBar functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
            font-weight: bold;
         }
      </style>
      
      <script>
         $(function() {
            var progressbar = $( "#progressbar-2" );
            $( "#progressbar-2" ).progressbar({
               value: 30,
               max:300
            });
            function progress() {
               var val = progressbar.progressbar( "value" ) || 0;
               progressbar.progressbar( "value", val + 1 );
               if ( val < 99 ) {
                  setTimeout( progress, 100 );
               }
            }
            setTimeout( progress, 3000 );
         });
      </script>
   </head>
   
   <body>
      <div id = "progressbar-2"></div>
   </body>
</html>

Ici, vous pouvez voir que la barre de progression se remplit de droite à gauche et s'arrête lorsque la valeur atteint 300.

$ (selector, context) .progressbar ("action", params), méthode

La méthode progressbar ("action", params) peut effectuer une action sur la barre de progression, telle que la modification du pourcentage rempli. L'action est spécifiée sous forme de chaîne dans le premier argument (par exemple, "valeur" pour modifier le pourcentage rempli). Découvrez les actions qui peuvent être passées, dans le tableau suivant.

Syntaxe

$(selector, context).progressbar ("action", params);;

Le tableau suivant répertorie les différentes actions qui peuvent être utilisées avec cette méthode -

N ° Sr.	Action et description
1	détruire Cette action supprime complètement la fonctionnalité de barre de progression d'un élément. Les éléments reviennent à leur état pré-init. Cette méthode n'accepte aucun argument. Action - destroy Cette action supprime complètement la fonctionnalité de barre de progression d'un élément. Les éléments reviennent à leur état pré-init. Cette méthode n'accepte aucun argument. Syntax `$( ".selector" ).progressbar("destroy");`
2	détruire Cette action supprime complètement la fonctionnalité de barre de progression d'un élément. Les éléments reviennent à leur état pré-init. Cette méthode n'accepte aucun argument. Action - destroy Cette action supprime complètement la fonctionnalité de barre de progression d'un élément. Les éléments reviennent à leur état pré-init. Cette méthode n'accepte aucun argument. Syntax `$( ".selector" ).progressbar("destroy");`
3	désactiver Cette action désactive la fonctionnalité de barre de progression d'un élément. Cette méthode n'accepte aucun argument. Action - disable Cette action désactive la fonctionnalité de barre de progression d'un élément. Cette méthode n'accepte aucun argument. Syntax `$( ".selector" ).progressbar("disable");`
4	activer Cette action active la fonctionnalité de la barre de progression. Cette méthode n'accepte aucun argument. Action - enable Cette action active la fonctionnalité de la barre de progression. Cette méthode n'accepte aucun argument. Syntax `$( ".selector" ).progressbar("enable");`
5	option (optionName) Cette action récupère la valeur actuellement associée à optionName spécifié . Où optionName est une chaîne. Action - option( optionName ) Cette action récupère la valeur actuellement associée à optionName spécifié . Où optionName est une chaîne. Syntax `var isDisabled = $( ".selector" ).progressbar( "option", "disabled" );`
6	option Cette action obtient un objet contenant des paires clé / valeur représentant le hachage actuel des options de la barre de progression. Cette méthode n'accepte aucun argument. Action - option Cette action obtient un objet contenant des paires clé / valeur représentant le hachage actuel des options de la barre de progression. Cette méthode n'accepte aucun argument. Syntax `var options = $( ".selector" ).progressbar( "option" );`
sept	option (optionName, valeur) Cette action définit la valeur de l'option de barre de progression associée au nom d'option spécifié . Action - option( optionName, value ) Cette action définit la valeur de l'option de barre de progression associée au nom d'option spécifié . L'argument optionName est le nom de l'option à définir et value est la valeur à définir pour l'option. Syntax `$( ".selector" ).progressbar( "option", "disabled", true );`
8	option (options) Cette action définit une ou plusieurs options pour les barres de progression. L'argument options est une carte de paires option-valeur à définir. Action - option( options ) Cette action définit une ou plusieurs options pour les barres de progression. L'argument options est une carte de paires option-valeur à définir. Syntax `( ".selector" ).progressbar( "option", { disabled: true } );`
9	valeur Cette action récupère la valeur actuelle de options.value , c'est-à-dire le pourcentage de remplissage dans la barre de progression. Action - value Cette action récupère la valeur actuelle de options.value , c'est-à-dire le pourcentage de remplissage dans la barre de progression. Syntax `$( ".selector" ).progressbar("value");`
dix	valeur (valeur) Cette action spécifie une nouvelle valeur au pourcentage renseigné dans la barre de progression. La valeur de l' argument peut être un nombre ou une valeur booléenne. Action - value( value ) Cette action spécifie une nouvelle valeur au pourcentage renseigné dans la barre de progression. La valeur de l' argument peut être un nombre ou une valeur booléenne. Syntax `$( ".selector" ).progressbar( "value", 50 );`
11	widget Cette action renvoie un objet jQuery contenant la barre de progression. Cette méthode n'accepte aucun argument. Action - widget Cette action renvoie un objet jQuery contenant la barre de progression. Cette méthode n'accepte aucun argument. Syntax `$( ".selector" ).progressbar("widget");`

Exemple

Voyons maintenant un exemple utilisant les actions du tableau ci-dessus. L'exemple suivant illustre l'utilisation des méthodes disable () et option (optionName, value) .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI ProgressBar functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
            font-weight: bold;
         }
      </style>
      
      <script>
         $(function() {
            $( "#progressbar-3" ).progressbar({
               value: 30
            });
            $( "#progressbar-3" ).progressbar('disable');
            $( "#progressbar-4" ).progressbar({
               value: 30
            });
            var progressbar = $( "#progressbar-4" );
            $( "#progressbar-4" ).progressbar( "option", "max", 1024 );
            function progress() {
               var val = progressbar.progressbar( "value" ) || 0;
               progressbar.progressbar( "value", val + 1 );
               if ( val < 99 ) {
                  setTimeout( progress, 100 );
               }
            }
            setTimeout( progress, 3000 );
         });
      </script>
   </head>
   
   <body>
      <h3>Disabled Progressbar</h3>
      <div id = "progressbar-3"></div><br>
      <h3>Progressbar with max value set</h3>
      <div id = "progressbar-4"></div>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML progressbarexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante -

Barre de progression désactivée

Barre de progression avec valeur maximale définie