js plug-in YprogressBar obtient de superbes compétences effect_javascript en matière de barre de progression

Présentation

YprogressBar est un plug-in de barre de progression basé sur HTML5.

YprogressBar est un plug-in de barre de progression léger, facile à utiliser, qui consomme peu de ressources et imite une bonne interface de compression et de décompression avec un affichage numérique. Il prend également en charge l'ajout de paramètres dans la description pour afficher dynamiquement des informations d'exécution plus détaillées. . Tels que la vitesse de téléchargement, le temps restant, etc.

Le code YprogressBar est écrit de manière concise et a une conception structurelle raisonnable, qui n'aura aucun effet négatif sur votre système.

Aperçu de l'interface

Mode d'emploi

Référence du fichier

Citez simplement les fichiers yprogressbar.css et yprogressbar.js.

Aperçu de l'utilisation

 var ypb = new YprogressBar({
  title: "正在上传文件...",
  des: "上传速度：{{y:speed}}MB/秒 剩余时间约{{y:second}}秒",
  closeable: true,
  cancelCallback: function(rate, vars){
 console.log(rate);
 console.log(vars);
  }
 });
 ypb.show();

Description des paramètres d'instanciation

Afin de démontrer pleinement le style orienté objet, si vous souhaitez utiliser YprogressBar, vous devez l'instancier. Lors de l'instanciation, vous avez besoin de certains paramètres. Le tout est un objet. Les paramètres spécifiques seront expliqués un par un. ci-dessous.

titre

Titre de la barre de progression, expliquez à quoi sert cette barre de progression.

des

Pour une description plus détaillée de ce que vous souhaitez faire, vous pouvez écrire directement une phrase.

Parfois, nous voulons faire quelque chose de sophistiqué, comme afficher la vitesse de téléchargement, le temps restant, etc. YprogressBar vous soutient pleinement pour ce faire. Il vous suffit d'ajouter des variables à la description. Le format est : {{y:name}. }.

Par exemple : des : "Vitesse de téléchargement : {{y:speed}} Mo/seconde, le temps restant est d'environ {{y:second}} secondes", où {{y:speed}} et {{y : second} } est la variable.

Si une variable est spécifiée ici, la valeur de la variable doit être spécifiée dans le deuxième paramètre lors de l'exécution d'une opération de mise à jour.

fermable

Rappel de destruction. Une fois le YprogressBar détruit, ce rappel sera déclenché, que la méthode de destruction soit appelée manuellement ou que l'utilisateur clique sur le bouton de fermeture.

Lorsque le rappel est déclenché, deux paramètres seront transmis, à savoir : la progression de l'exécution en cours et la valeur du paramètre dans la description à ce moment (l'objet contient le nom et la valeur).

afficher la méthode

Aucun paramètre n'est requis.

La barre de progression ne sera pas affichée tant que la méthode show n'est pas appelée.

méthode de mise à jour

Progression de la mise à jour, deux paramètres.

Le premier paramètre est la progression actuelle, exprimée directement sous forme de nombre, par exemple : 26, représentant 26%.

Le deuxième paramètre est un objet, qui doit contenir les valeurs de toutes les variables dans la description. S'il n'y a aucune variable dans la description, ce paramètre peut être ignoré.

Par exemple :

 ypb.update(26,{
 speed: 312,
 second: 5
 });

méthode de destruction

Détruisez la barre de progression et libérez de la mémoire.

Voir sur Github

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.