Share
La barre de progression est l’un des derniers composants à être ajoutée à l’excellente bibliothèque de widgets d’interface utilisateur et d’aides à l’interaction construits sur jQuery. Il a été introduit dans la dernière version de la bibliothèque, qui était au moment de la rédaction de 1.7.
La barre de progression est actuellement seulement déterminée, ce qui signifie que lorsque nous la mettons à jour, nous devons lui indiquer explicitement quelle est sa valeur et nous devons savoir à l'avance quand le processus pour lequel il a été effectué est terminé. Ce widget n'est actuellement pas le meilleur choix pour un processus qui prendra une durée indéterminée..
C'est un widget très simple avec une petite API qui expose un nombre limité de propriétés et de méthodes, mais il peut toujours être très efficace et est idéal pour fournir aux visiteurs un retour visuel sur le pourcentage d'un processus qui reste avant la fin..
Nous aurons besoin d’une copie de la version actuelle de jQuery UI, qui peut être obtenue à partir du générateur de téléchargement à l’adresse http://jqueryui.com/download. Une fois que nous l'avons téléchargé, nous devrons le décompresser afin de préserver la structure de répertoires existante. Nous devrions créer un nouveau répertoire sur notre ordinateur appelé jQuery UI, puis créer un nouveau dossier appelé jqueryui1.7. L’archive doit ensuite être décompressée dans le dossier jqueryui1.7.
Les archives contiendront tout ce dont nous avons besoin pour commencer. versions minifiées et non compressées de tous les fichiers de la bibliothèque, de certains fichiers de thème (le thème par défaut est la finesse du nom approprié) et même de la dernière version de la bibliothèque jQuery sous-jacente.
La barre de progression s'appuie sur un certain nombre de fichiers pour fonctionner. ceux-ci sont énumérés ci-dessous dans l'ordre dans lequel ils doivent être ajoutés à notre page:
Les trois premiers fichiers font partie de la vaste infrastructure CSS et sont utilisés pour donner à la barre de progression son apparence distincte. Nous n'avons pas besoin de nous en tenir à ce thème dans une implémentation réelle; nous avons de nombreuses options de personnalisation, y compris un grand nombre de thèmes préconfigurés disponibles directement auprès de Themeroller, un thème personnalisé que nous pouvons concevoir nous-mêmes à l'aide de Themeroller ou même un thème personnalisé que nous créons manuellement en remplaçant les règles définies dans les feuilles de style par défaut. Nous ne ferons cependant aucune de ces choses dans ce tutoriel, mais nous pouvons utiliser certaines des classes fournies par le framework..
Ce widget nécessite très peu de marge sous-jacente; En plus des ressources de bibliothèque énumérées ci-dessus, nous avons uniquement besoin d'un élément conteneur simple. Dans votre éditeur de texte, créez le shell de page suivant avec les ressources requises et l'élément conteneur:
Barre de progression de jQuery UI
Enregistrez-le sous le nom progressBar.html dans le répertoire racine de l'interface utilisateur jQuery. Nous plaçons les feuilles de style au début du fichier et les scripts à la fin; ceci pour des raisons de performances, car les pages chargent le contenu plus rapidement lorsqu'elles n'essaient pas de charger JavaScript simultanément. Il s'agit d'une pratique de performance bien documentée à laquelle on adhère le mieux. Nous avons laissé une balise de script vide au bas de la page; ajoutons du code ensuite:
Accentsconagua
$ (function () // appelle le constructeur de la barre de progression $ ("# conteneur"). progressbar ();); Pour initialiser la barre de progression par défaut, nous n’appelons que sa méthode de constructeur, progressbar, sur l’élément conteneur dans lequel le widget doit être rendu. Lorsque vous exécutez cette page dans votre navigateur, vous devriez voir que la barre de progression a été créée et remplit automatiquement la largeur de son conteneur, qui dans ce cas est le corps de la page:
La valeur de la barre de progression sera définie par défaut à zéro, raison pour laquelle elle apparaît vide dans la capture d'écran précédente. Pour remplir la barre de progression, nous devons définir la propriété value. changez la fonction constructeur de sorte qu'elle apparaisse comme suit:
// appelle le constructeur de la barre de progression $ ("# conteneur"). progressbar (valeur: 50); La propriété value détermine le pourcentage de la barre de progression qui est remplie, ce qui permet au visiteur de connaître visuellement la quantité de tâche à accomplir. La barre de progression devrait maintenant être à moitié remplie, comme dans la capture d'écran suivante:
Obtenir la valeur actuelle du widget est aussi simple que de le définir. nous pouvons utiliser l'une de ses méthodes pour renvoyer la propriété de valeur actuelle. Après le constructeur initial, ajoutez le code suivant:
// place la souris sur la barre de progression
$ ("# conteneur"). mouseover (function () // affiche la valeur actuelle $ ("") .attr (" id "," pourcentage "). text ($ (" # conteneur "). progressbar (" option "," valeur ") +"% complet "). appendTo (" corps ");) ; // définit la souris pour la barre de progression $ ("# conteneur"). mouseout (function () // masque la valeur $ ("# pourcentage"). remove (););
Nous avons ajouté deux fonctions anonymes simples qui sont déclenchées par les événements mouseover et mouseout déclenchés par la barre de progression (notez qu'il s'agit d'événements DOM standard et non d'événements de barre de progression personnalisés). Tout ce que nous faisons dans la première fonction est de créer un nouveau paragraphe avec la valeur actuelle de la barre de progression en tant que innerText et de l'ajouter à la page..
La valeur est récupérée à l'aide de la méthode option. L'argument transmis à la méthode est le nom de la propriété que nous aimerions récupérer. La deuxième fonction supprime simplement le message à nouveau. Le message est montré dans la capture d'écran suivante:
La propriété value, ou option, est actuellement la seule propriété configurable de la barre de progression; dans cet exemple, nous le définissons lorsque le widget est initialisé en le transmettant comme propriété d'un objet de configuration. Pour définir cette propriété après l’initialisation du widget, nous utiliserons la méthode option. Pour utiliser cette méthode en mode setter, nous devons passer un second paramètre spécifiant la nouvelle valeur, comme ceci:
barre de progression ("option", "valeur", 75) Vous vous demandez peut-être pourquoi j'ai dit «un deuxième paramètre» alors qu'il y a clairement trois arguments dans la ligne de code ci-dessus. Même si nous utilisons la méthode option, nous ne l'appelons pas directement. Au lieu de cela, nous appelons à nouveau la méthode constructeur, mais en lui indiquant que nous aimerions appeler la méthode option. Le widget appellera la méthode en interne, en passant les deux paramètres ("value" et 75) que nous passons au constructeur après le nom de la méthode.
La barre de progression expose un événement unique, l'événement change, qui fournit un mécanisme auquel nous pouvons nous connecter afin de pouvoir répondre aux changements de sa valeur. Il s'agit d'un événement personnalisé afin que nous puissions le détecter et y réagir de deux manières différentes. Nous pouvons définir une fonction anonyme en tant que valeur de la propriété change dans un objet de configuration, comme nous l'avons fait avec la propriété value, ou utiliser la méthode bind de jQuery pour spécifier la fonction anonyme à exécuter. Une différence subtile entre les deux est que le code spécifié en utilisant la méthode bind sera exécuté en premier.
La barre de progression API expose cinq méthodes répertoriées ci-dessous:
Toutes ces méthodes sont utilisées exactement de la même manière que la méthode option que nous avons examinée. en appelant la méthode constructeur spécifiant le nom de la méthode et les paramètres que nous aimerions transmettre. La plupart d’entre eux doivent être assez explicites..
Jusqu'à présent, cet exemple est très basique pour ceux d'entre vous qui n'ont peut-être jamais utilisé l'interface utilisateur jQuery auparavant. Intensifions un peu les choses et mettons en place quelque chose qui ressemble au genre de chose que nous aimerions faire dans une mise en œuvre appropriée. Cet exemple sera aussi fondamental, mais il devrait donner une bien meilleure idée de la manière dont le widget peut être conçu pour fonctionner pour nous. Notre page finie va ressembler à ceci:
Commencez par la page sous-jacente suivante dans un nouveau fichier dans votre éditeur de texte:
Barre de progression de jQuery UI Formulaire d'inscription
Le progrès:
