Les champs numériques sont souvent présents sur les sites web. Ils ont même été intégrés par le HTML5 avec la balise <input type= »number »>.
Avec jQuery UI, tout devient simple, il suffit d’utiliser la méthode spinner() avec une balise <input>.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Des champs numériques faciles avec le Framework jQuery UI
Bonjour à tous et bienvenu sur Développement Facile.
Dans ce nouveau cours, je vais vous expliquer comment utiliser les champs numériques avec les jQuery UI. Les champs numériques c’est là où vous mettez le prix maximum dans une boutique e-commerce, le prix minimum, ou la quantité d’un article que vous souhaitez, c’est ça ce que j’appelle les champs numériques.
Les champs numériques
Il suffit d’associer une balise input et d’appeler la méthode spinner, et ça va créer un champ numérique avec jQuery. Vraiment, très simple.
Je passe en revue toutes les options, je passe vite parce que vous commencez à connaître très bien jQuery UI avec tous les cours qu’il y a eu dessus, donc l’option culture ça va définir, vous une savez que les Anglo-Saxons utilise un point séparateur des décimales et nous c’est plutôt la virgule, donc vous allez ainsi définir si c’est une virgule ou un point pour les décimales ou le dollar, il est avant le prix, aux États-Unis, alors que le signe euro est à la après le prix en France, voilà à quoi sert l’option culture.
Vous avez également disable pour désactiver le champ numérique, icons vous pouvez mettre des icônes, pour augmenter ou diminuer le compteur, l’affichage par défaut, incrémental, max, la valeur maximum du compteur, vous avez vraiment tout un tas d’options, minimum, le numberFormat un nombre décimal ou des devises pour l’euro, dollars, page avec step c’est le pas d’avancement du compteur soit de 1 en 1 vous augmentez ou de moins en moins quand vous diminuez.
Les méthodes – les champs numériques
Des méthodes, destroy, pour supprimer la fonctionnalité du compteur, disable pour le désacticver, enable pour activer le champ numérique, les options vous pouvez récupérer toutes les options, les définir une par une soit toutes d’un coup, à vous de voir.
Vous avez aussi pour diminuer la valeur du compteur, pageDown, pageUp, stepDown, stepUp, value pour renvoyer la valeur du compteur ou pour la modifier, et le widget ça vous renvoie un objet jQuery qui contient le champ numérique.
Les événements – les champs numériques
Vous avez comme d’habitude, des éléments change lorsque la valeur du compteur a été modifiée, create lorsque le champ numérique est créé, spin c’est pendant l’incrémentation quand l’utilisateur appuie sur les touches incrémenter ou diminuer la valeur du compteur, parse c’est avant une incrémentation ou une décrémentation, et l’événement stop il est déclenché après une décrémentation ou une incrémentation. Vous avez les deux, avec tous ces événements, vous pouvez déjà faire beaucoup de choses sur votre champ numérique.
Les champs numériques
Comme je vous l’ai dit, les options max et min ça définit les valeurs maximales et minimales du compteur, step c’est le pas d’avancement, en général c’est de un en un, mais des fois on peut aller de 10 en 10, si c’est des tarifs, en fonction des prix par exemple, et vous pouvez activer l’utilisation de la molette de la souris pour les champs numériques ce qui est vraiment très pratique, il suffit d’appeler l’utilitaire jquery.mousewheel.js, dans l’exemple de code source, vous le verrez avec l’utilisation de la molette de la souris.
Le paramètre value ça permet de fixer la valeur de départ du compteur, et il y a une méthode pour récupérer leurs valeurs actuelle des compteurs.
Comme je vous l’ai dit, il faut définir à jQuery, par défaut c’est le point pour les décimales, si vous voulez des virgules il faut paramétrer l’option culture, DE pour l’Europe, et l’option numberFormat vous devez la préciser aussi.
Comme je vous l’ai dit, vous pouvez préciser la devise, dollars, euro, le champ numérique supporte également une gestion très précise des éléments, pensez à utiliser des thèmes roller pour personnaliser l’apparence de votre champ numérique, et là on va passer tout de suite au code source.
Exemple de champs numériques
Un champ numérique c’est ça, tout simplement, je vous montre, aux USA c’est un point en séparateur de virgules, là j’utilise la molette de la souris, les touches bas, hautes, c’est un défilement de 30 par 30, voilà, avec, pour l’Europe c’est la virgule, le signe change, vous voyez que le signe se déplace, et c’est une virgule, et là c’est un point.
Vous pouvez, bien évidemment, afficher la valeur, la modifier, l’augmenter, voilà un peu le fonctionnement du champ numérique, si vous passez en USA, voilà, alors comment ça marche dans le code ?
Comme je vous l’ai dit, il suffit d’utiliser input IDI, ça c’est le bouton, et pour le champ numérique il est là, input add input avec une valeur par défaut 29, on peut la définir ici la value ou utiliser l’option value de spinner, de la méthode spinner tout simplement. Vraiment très simple, et ici, vous créez votre champ numérique avec un surcoût sur le champ input count ici, voilà, le C pour une devise, N pour un nombre, là on utilise une devise euros, avec une devise, ensuite on écoute l’événement create à la création du compteur on va charger l’option culture, on va le mettre en Européen, pour avoir les virgules, et n définit la valeur de départ du compteur à 29, on écoute onChange c’est pour écouter l’événement, change si l’utilisateur avait choisi USA, il faudra bien évidemment mettre à jour votre champ numérique, c’est comme ça qu’on fait, on récupère la valeur et on met à jour le champ numérique, et sur le onClick on récupère la valeur du champ numérique .spinner.value qui permet d’afficher la valeur.
Votre plan d’actions !
Une fois de plus, vous pouvez constater par vous-même, dans le code source, la simplicité d’utilisation du plug-in jQuery UI, si vous avez des questions posez-les directement sous ce cours vidéo, sur Développement Facile, sous le cours vous pouvez télécharger le code source complet et commenté, comme ça vous pourrez le réutilisez dans vos applications, dans votre site Internet, maintenant je vous invite à consulter la deuxième vidéo, c’est la suite, il y a une image vidéo 2, au-dessus de cette vidéo, dans laquelle je vais vous expliquer comment je vais vous accompagner pendant plusieurs mois, pendant quatre mois, pour vous aider à apprendre toutes les possibilités du framework jQuery, du framework Dojo, de l’extension jQuery UI, à travers une multitude d’exercices, je vais vous suivre, tout est expliqué dans la deuxième vidéo, donc cliquez sur l’image en haut de cette vidéo ou en dessous, et en attendant je vous dis à tout de suite sur Développement facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple champ numérique jQuery UI
Et voici le code source commenté qui accompagne ce cours sur le framework jQuery UI.
Téléchargement du code source Exemple de champ numérique jQuery UI
