Présentation de la barre de progression de JQuery

Les barres de progression sont un élément jQueryUI. Alors que nous savons que jQuery est une bibliothèque JavaScript, qui est utilisée dans le code html et que la raison de l'utilisation de jQuery dans un code html est utilisée pour créer ou développer facilement des composants UI (interface utilisateur) par javascript. Ainsi, avec l'aide de jQuery, nous pouvons rendre notre site Web non seulement plus attrayant et aussi plus interactif. La barre de progression est également l'un des composants de l'interface utilisateur jQuery, qui est utilisé pour afficher l'état d'achèvement de la tâche ou du processus en pourcentage.

Nous pouvons afficher la barre de progression sous deux formes telles que «barre de progression déterminée» et «barre de progression indéterminée».

  1. Déterminer la barre de progression - Déterminer la barre de progression que nous utilisons dans un scénario où nous pouvons afficher la progression ou l'état exact de la tâche. Par exemple, le nombre de fichiers envoyés, le pourcentage de la copie de données, le pourcentage de téléchargement de fichier, etc.
  2. Barre de progression indéterminée - barre de progression indéterminée que nous utilisons dans un scénario où la progression ou le statut exact de la tâche est inconnu ou ne peut pas être déterminé. Par exemple, nous ne pouvons pas déterminer la progression lorsque la demande de connexion au serveur se poursuit.

Syntaxe de la méthode progressbar ()

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

  • $ (élément, suite). méthode progressbar (option)
  • $ (élément, suite). méthode progressbar («action», params)

L'élément pour lequel nous devons gérer la progression, nous pouvons appliquer $ (élément, suite). progressbar (opt) méthode sur l'élément html à et géré sous la forme d'une barre de progression. Alors que l'option est un paramètre utilisé pour passer les différentes valeurs pour spécifier comment les barres de progression doivent être comportementales et apparaître. Par exemple $ («#elementid») .progressbar ((value: 30)), ici value est une option et 30 est la valeur fournie pour l'option value.

De même, nous pouvons passer non seulement une option, mais nous pouvons également passer plus d'une option juste chaque option séparée par la virgule comme indiqué ci-dessous -

$ (sélecteur, contexte) .progressbar ((option1: valeur1, option2: valeur2… ..));

Les différentes options que l'on peut passer à la barre de progression sont données ci-dessous -

  • désactivé - L'option désactivée si elle est définie sur true, elle désactive les barres de progression et false est une valeur par défaut désactivée.
  • max - L'option max définit la valeur maximale d'une barre de progression. La valeur par défaut du max est 100.
  • value - L'option value utilisée pour définir la valeur initiale de la barre de progression. La valeur par défaut de value est 0.

Exemples de barre de progression JQuery

La fonctionnalité par défaut de la méthode progressbar () -

Ensuite, commençons quelques exemples sur la barre de progression pour comprendre sa fonctionnalité. Tout d'abord, nous écrivons quelques exemples pour voir la fonctionnalité par défaut de la barre de progression sans passer de paramètres à la méthode progressbar (). Comme la barre de progression est un élément de l'interface utilisateur jQuery, la première étape consiste à inclure les fichiers externes jquery en spécifiant l'attribut src de l'élément.

Exemple de programme # 1



My first jQuery UI Progress Bar example program

rel = "stylesheet">
.ui (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)

$(function() (
$( "#pbid" ).progressbar((
));
));

My first jQuery UI Progress Bar example program

rel = "stylesheet">
.ui (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)

$(function() (
$( "#pbid" ).progressbar((
));
));

Il s'agit de la fonctionnalité par défaut de la barre de progression

Production -

Ensuite, nous utilisons l'option de valeur et la passons à 40, ce qui indique que la progression de 40% dans la barre de progression comme indiqué dans le code ci-dessous -

Exemple de programme # 2



My first jQuery UI Progress Bar example program

rel = "stylesheet">
.ui (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)

$(function() (
$( "#pbid" ).progressbar(( value : 40
));
));

My first jQuery UI Progress Bar example program

rel = "stylesheet">
.ui (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)

$(function() (
$( "#pbid" ).progressbar(( value : 40
));
));

Il s'agit de la fonctionnalité par défaut de la barre de progression

Production -

Ensuite, nous définissons les options max et value respectivement sur 400 et 40% dans la méthode progressbar de JqueryUI.

Exemple de programme # 3


My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
$( "#pbid" ).progressbar((
value: 40,
max:400
));
var pb = $( "#pbid" );
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 4000 );
));

.ui(
background: blue;
color: #333333;
border: 2px solid #DDDDDD;
font-weight: bold;
)
My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
$( "#pbid" ).progressbar((
value: 40,
max:400
));
var pb = $( "#pbid" );
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 4000 );
));

.ui(
background: blue;
color: #333333;
border: 2px solid #DDDDDD;
font-weight: bold;
)

Voici l'exemple de la barre de progression pour max = 400 et valeurs = 40%

Production -

La barre de progression commence à se remplir de gauche à droite et s'arrête lorsqu'elle atteint 400. Si aucune valeur ne prévoit l'option max, le remplissage s'arrête à l'extrémité droite uniquement.

L'élément pour lequel nous devons gérer la progression, nous pouvons appliquer la méthode $ (element, cont) .progressbar ("action", params) sur l'élément html pour gérer et effectuer une action sur la barre de progression. sous la forme d'une barre de progression. L'action est un paramètre spécifié sous forme de chaîne dans le premier argument. Par exemple $ (“#elementid”) .progressbar ('disable'), ici l'option disable désactive la barre de progression.

Certaines des actions qui peuvent être passées, dans la méthode $ (element, cont) .progressbar ("action", params) sont données ci-dessous -

  • destroy - L'action destroy à utiliser pour supprimer complètement la fonctionnalité de barre de progression d'un élément et revenir à l'état pré-initial d'un élément. Il s'agit d'une méthode à zéro argument.
  • disable - L'action de désactivation désactive la fonctionnalité de barre de progression de l'élément. Il s'agit d'une méthode à zéro argument.
  • enable - L'action enable active la fonctionnalité de barre de progression de l'élément. Il s'agit d'une méthode à zéro argument.
  • option (option) - L'action option (option) permet d'obtenir la valeur de l'élément spécifié. Il accepte une option d'argument, qui est une chaîne.
  • option - L'action options utilisée pour obtenir une option de barre de progression qui se présente sous la forme de paires clé: valeur. Il s'agit d'une méthode à zéro argument.
  • option (option, valeur) - L'action option (option, valeur) utilise pour définir la valeur de l'option de la barre de progression qui est associée à l'option spécifiée.
  • option (options) - L'action option (options) permet de définir une ou plusieurs options pour les barres de progression. Il accepte une option d'argument qui est une correspondance avec des paires option-valeur.
  • value - L'action value utilisée pour obtenir la valeur des options. La valeur indique le pourcentage de remplissage dans la barre de progression.
  • valeur (valeur) - L'action valeur (valeur) permet de définir une nouvelle valeur pour le pourcentage à remplir dans la barre de progression. Il accepte une valeur d'argument qui est nombre.
  • widget - L'action du widget utilisée pour obtenir l'élément sur lequel la barre de progression est appliquée. Il s'agit d'une méthode à zéro argument.

Ensuite, nous voyons quelques exemples de la barre de progression avec une action qui sont mentionnés ci-dessus. Permet de voir le programme ci-dessous pour la méthode progressbar () avec l'action disable () et option (optionName, value).

Exemple de programme # 4



My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
$( "#pbid1" ).progressbar((
value: 40
));
$( "#pbid1" ).progressbar('disable');
$( "#pbid2" ).progressbar((
value: 40
));
var pb = $( "#pbid2" );
$( "#pbid2" ).progressbar( "option", "max", 400 );
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 400 );
));

.ui (
background: blue;
border: 1px solid #DDDDDD;
font-weight: bold;
color: #333333;
)

My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
$( "#pbid1" ).progressbar((
value: 40
));
$( "#pbid1" ).progressbar('disable');
$( "#pbid2" ).progressbar((
value: 40
));
var pb = $( "#pbid2" );
$( "#pbid2" ).progressbar( "option", "max", 400 );
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 400 );
));

.ui (
background: blue;
border: 1px solid #DDDDDD;
font-weight: bold;
color: #333333;
)

Ceci est l'exemple de la barre de progression pour l'action Désactiver



Ceci est l'exemple de la barre de progression pour l'action max et value

Production -

La barre de progression ci-dessus est désactivée, c'est pourquoi elle n'affiche pas la progression et la barre de progression ci-dessous configure l'option max et valeur avec certaines valeurs, de sorte que la progression sous forme de remplissage s'affiche de gauche à droite.

L'élément de la barre de progression gère les événements -

En plus de ce qui précède, la barre de progression peut également être gérée par l'événement. L'interface utilisateur jQuery fournit une méthode d'événement, l'événement est déclenché pour un événement particulier. Certains des événements qui peuvent être utilisés pour gérer la barre de progression sont donnés ci-dessous -

  • change (event, ui) - Chaque fois que la valeur de la barre de progression change ou que la progression change, cet événement est déclenché.
  • complete (event, ui) - Lorsque la progression ar atteint la fin ou atteint la valeur maximale, cet événement est généré.
  • create (event, ui) - Chaque fois que la barre de progression est créée, cet événement est déclenché.

Ensuite, écrivez quelques exemples de l'action d'événement ci-dessus. L'exemple suivant illustre l'utilisation de la méthode d'événement pendant la fonctionnalité de la barre de progression. Cet exemple montre comment utiliser des événements pour modifier et terminer.

Exemple de programme # 5



My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
pl = $( ".pbc" );
var pb = $( "#pbid" );
$( "#pbid" ).progressbar((
value: false,
change: function() (
pl.text(
pb.progressbar( "value" ) + "%" );
),
complete: function() (
pl.text( "Loading Completed!" );
)
));
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 3000 );
));

.ui-widget-header (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)
.progress-label (
position: absolute;
top: 13px;
left: 50%;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
)

My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
pl = $( ".pbc" );
var pb = $( "#pbid" );
$( "#pbid" ).progressbar((
value: false,
change: function() (
pl.text(
pb.progressbar( "value" ) + "%" );
),
complete: function() (
pl.text( "Loading Completed!" );
)
));
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 3000 );
));

.ui-widget-header (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)
.progress-label (
position: absolute;
top: 13px;
left: 50%;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
)

Ceci est l'exemple de la barre de progression avec événement



Chargement…

La sortie du programme ci-dessus est dans la séquence d'exécution ci-dessous -

La barre de progression commence à se remplir de gauche à droite et s'arrête lorsqu'elle atteint la fin.

Conclusion

1. Les barres de progression sont un élément jQueryUI.

2. La barre de progression est utilisée pour afficher l'état d'achèvement de la tâche ou du processus en pourcentage.

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

  • $ (élément, suite). méthode progressbar (option)
  • $ (élément, suite). méthode progressbar («action», params)

4. Les différentes options que l'on peut passer à la méthode progressbar () sont -

désactivée

  • max
  • valeur

5. Certaines des actions qui peuvent être passées, dans la méthode $ (element, cont) .progressbar ("action", params) sont -

  • détruire
  • désactiver
  • activer
  • option
  • option (option, valeur)
  • option (options)
  • valeur
  • valeur (valeur)
  • widget

6. L'événement qui peut être utilisé pour gérer la barre de progression est donné ci-dessous -

  • complet (événement, ui)
  • créer (événement, ui)
  • changement (événement, ui)

Articles recommandés

Ceci est un guide de la barre de progression JQuery. Nous discutons ici des méthodes et des exemples de la barre de progression JQuery avec la syntaxe et la sortie. Vous pouvez également consulter les articles suivants pour en savoir plus -

  1. Attributs jQuery
  2. Méthodes jQuery Ajax
  3. Effets jQuery
  4. Alternatives à jQuery
  5. 5 principaux types de boosters avec exemple de code
  6. Comment créer un ProgressBar dans JavaFX?

Catégorie:

Développement de logiciels