Utilisez la puissance du Framework jQuery UI pour créer vos curseurs…

Le Framework jQuery UI permet d’ajouter des curseurs quel que soit le navigateur de l’utilisateur.

Apprenez comment utiliser l’équivalent de la balise range HTML5 avec jQuery UI et surtout compatible avec la majorité des navigateurs internet.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Utilisez la puissance du Framework jQuery UI pour créer vos curseurs…

Bonjour à tous et bienvenu sur Développement Facile.

On continue ensemble, pour que vous puissiez savoir utiliser les possibilités de l’extension jQuery UI, dans ce nouveau cours vous allez apprendre à utiliser les curseurs.

Les curseurs

Tous ce qui est curseurs, par exemple les barres, par exemple pour sélectionner un intervalle de prix, sur un site e-commerce, dans un champ de recherche automatiquement, pour sélectionner une valeur avec une barre défilante, une sorte de curseur, il suffit d’ajouter un slider, vous définissez une div, un id curseur et vous appelez la méthode slider dessus et ça va vous créer une barre, je ne sais pas comment l’appeler, un curseur, tout simplement.

Les options – Les curseurs

Vous avez différentes options, vous pouvez créer, faire des animations sur votre curseur, le désactiver, mettre max et min, une valeur maximale ou minimale pour votre curseur, par défaut c’est de 0 à 100, bien évidemment, pour un intervalle de prix ce sera de 499 à 997 euros, par exemple.

Vous pouvez définir l’orientation de votre curseur, soit horizontale, soit verticale, activer le double curseur, très pratique, vous le voyez sur les site e-commerce le double curseur pour définir un intervalle de prix avec un prix minimum et un prix maximum, step c’est pour la marge de progression, le pad de progression, soit de 1 en 1, soit de 5 en 5, suivant votre site internet, value c’est la valeur du curseur, values c’est l’initialisation des deux poignées du curseur, on va voir tout ça ensemble dans un code source commenté.

Les méthodes – les curseurs

Vous avez la méthode destroy pour supprimer le curseur, disable, enable, les options, je passe assez vite dessus car vous avez déjà eu plusieurs cours sur les widgets jQuery UI, c’est toujours les mêmes méthodes.

Pareil value pour définir les valeurs, les événements c’est toujours les mêmes, change lorsque le l’utilisateur à déplacer la poignée du curseur, vous avez create, slide, start, stop, je vous invite à faire une pause sur la vidéo, tout est écrit en français, il y a toujours un exemple de code, si vous avez vu les autres cours sur jQuery UI, il y a toujours un événement ou deux en plus ou en moins, sinon create, start, toujours à peu près les mêmes événements.

Les curseurs

L’option value ça permet d’attribuer une valeur par défaut à la poignée du curseur, le positionner, des options minimum, min, max pour définir une valeur minimum, maximum, pour votre curseur. step pour le pas d’avancement, soit de 1 en 1, de 5 en 5.

Vous pouvez utiliser range pour afficher un double curseur, l’orientation horizontale ou verticale de votre curseur, vous pouvez définir, modifier la taille des caractères d’un texte dans un div grâce à un curseur, en utilisant les événements start, stop, change et slide, en les écoutants directement.

Exemple de curseurs

On va voir ensemble le code source, ce sera beaucoup plus parlant pour vous, alors le code source, vous avez la page, vous la voyez directement, le code source comment ça marche ?
Là, on crée un curseur vous avez une balise div curseur, ici, on a créé plusieurs curseurs, du texte et on va associer tout ça avec jQuery UI, tout est commenté, la valeur minimum, la valeur maximum, la valeur de départ du curseur, je vous le met, ce n’était pas écrit, la progression, on affiche la valeur du curseur, on a un #value pour afficher la valeur du curseur, ici, valeur du curseur on l’affiche.
Vous avez aussi la mise à jour de la valeur affichée, la taille des caractères, size lorem c’est ici taille des caractères, comment on fait ?
On accède au mode curseur slider et on demande la valeur, et ça nous renvoie la valeur du curseur.
Tout est expliqué, tout le code est commenté, on met à jour la taille de la police, on sur lorem ici, la classe lorem tout simplement, on récupère le CSS, on rajoute font size et on définit la valeur de la taille de la police, la nouvelle taille de la police, ici, on peut augmenter la taille de la police, grâce au curseur, la diminuer, vous voyez, ça diminue la taille de la police, elle augmente, elle diminue, c’est ici, on a défini une valeur minimum de 8, de 36 avec un pad de 1 en 1. Là c’est l’orientation on a un curseur vertical, ça c’est des curseurs horizontaux, on peut jouer aussi sur l’opacité d’une image, comment on fait ça ?
On a notre curseur image, et là on récupère la valeur et on joue sur le CSS opacité de l’image, c’est aussi simple que ça, la valeur opacité CSS la propriété, et on récupère l’opacité de l’image avec la value ici, on le divise par 100 et ça permet de modifier l’opacité de l’image, tout simplement. Après on a notre double curseur, avec range avec des prix minimum de 97 à 1997 avec un pas de progression de 37, les valeurs par défaut et là on indique à chaque fois on met à jour le prix, 97 à 1997 et on fait des pas de 37 en 37, et là on a notre curseur, ici, avec sa valeur, valeur 69 par défaut, si je recharge la page, 69, tous s’est mis à jour avec les valeurs définies par défaut. Tout est commenté sur le code source en détail, vous pouvez activer, désactiver des options à vous de tester, de vous amuser, voilà, avec les curseurs, de les implémenter, pour agrandir la taille de la police, la diviser, vous pouvez faire tout ça aller les curseurs, très facilement avec l’extension jQuery UI.

Votre plan d’actions !

C’est parti ! A vous d’utiliser les fonctionnalités jQuery UI avec les curseurs, de les implémenter dans vos sites internet, comme d’habitude sur Développement Facile, vous retrouverez le code source, il est commenté, en téléchargement comme ça vous pouvez l’utiliser directement dans vos applications web.
Si vous avez des questions posez-les sous la vidéo, je vous invite dès maintenant à voir la deuxième vidéo, il y a une image avec un lien au-dessus vers la vidéo deux, et dans cette vidéo vous allez pouvoir profiter de mon accompagnement personnalisé et individuel pendant quatre mois pour vous expliquer, à travers une multitude exercices de mises en pratiques, les fonctionnements de jQuery, de l’extension jQuery UI, le Framework Dojo, vous allez tout savoir regardez la deuxième vidéo dès maintenant, il y a une image au-dessus, vidéo2 ou en-dessous de cette vidéo. En attendant je vous dis à très bientôt sur Développement Facile

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple sur les curseurs jQuery UI

Et voici l’exemple de code source pratique sur les curseurs.

Posez vos questions sur le cours

Utilisez la zone des commentaires pour poser vos questions si vous avez besoin d’informations supplémentaires sur ce cours.