Aller au contenu

2 lignes de code pour créer des boutons remarquables avec jQuery UI

Apprenez comment créer très rapidement, des boutons tip top avec le Framework JavaScript jQuery UI.

Tout est dans la formation ci-dessous.

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

2 lignes de code pour créer des boutons remarquables avec jQuery UI

Bonjour à tous et bienvenu sur Développement Facile.

Ce nouveau cours consacré au plug-in jQuery UI, vous allez apprendre à utiliser les boutons donc vous avez déjà eu plusieurs cours sur cette extension jQuery, ou ensemble, on a utilisé des boutons, dans les exemples de code, vous avez vu comment ils fonctionnent, là on va aller plus loin, vous allez apprendre toutes les options des boutons, les événements, les méthodes disponibles, les animations, les checkbox, les boutons radio tous les boutons, comment vous pouvez utiliser jQuery UI pour donner des graphismes très attractifs, très jolis à vos boutons, c’est parti.

Les boutons

Vous pouvez facilement les personnaliser avec CSS3. Un bouton, il suffit de mettre une balise input dans votre code source, et de le récupérer $# votre sélecteur # Id Bouton, et d’appeler la méthode button, et automatiquement le champ input sera transformé en bouton avec le thème jQuery UI, c’est aussi simple que ça. Et vous pouvez transformer énormément de choses en bouton, les types submit, radio, checkbox,On va voir tout ça ensemble dès maintenant.

Les Options – les boutons

Les options ressembles beaucoup, vous avez déjà eu plusieurs cours sur jQuery UI, les options, les méthodes, les événements, se ressemblent plus ou moins, il y en a en plus, il y en a en moins, je vais allez vite, de toute façon ce sont des vidéos en HD donc vous pouvez lire facilement là juste à côté de moi.
disabled c’est une valeur true pour désactiver le bouton, des icônes, vous pouvez afficher des icônes dans vos boutons,
label c’est du texte affiché dans le bouton,
text ça détermine si le texte du bouton va être affiché ou non, je vais assez vite, je vous invite à faire pause sur le vidéo, tout est en français, bien expliqué, il y a toujours un exemple d’utilisation, faites une pause, regardez l’exemple, essayez dans votre code source, dans votre application.

Les méthodes – les boutons

Vous avez la méthode destroy pour supprimer le bouton,
disable pour le désactiver,
enable pour l’activer,
Les options vous pouvez les récupérer, les modifier,
refresh, pour actualiser l’état visuel du bouton,
widget pour récupérer l’objet bouton, un objet jQuery pour interagir dessus.

Les événements – les boutons

Vous avez un événement create, qui est déclenché lorsque le bouton est créé.

Les boutons

Vous pouvez très bien modifier la taille des boutons, avec la classe .ui-widget, vous pouvez choisir la couleur du texte, tout un tas de chose. Le bouton jQuery va s’adapter en fonction de votre choix, automatiquement. Vous pouvez ajouter des icônes sur votre bouton avec les options icons, une icône à droite, une icône à gauche, vous avez une liste des icônes je vous ai mis un lien avec la liste de toutes les icônes disponibles, vous allez sur ce lien, il est en-dessous de cette vidéo, et vous aurez toutes les icônes disponibles pour vos boutons, vous pouvez définir vos icônes personnalisées.

Les boutons radio

Vous pouvez utiliser des boutons radio, il suffit d’utiliser le titre radio avec input et fait bouton set pour créer un bouton jQuery.

Les boutons checkbox

Pour checkbox c’est la même chose, sauf que ce sera un type checkbox.

Les boutons

Vous pouvez sélectionner tous les boutons du checkbox au clic, vous créez un bouton, je vous ai mis le code à utiliser, vous pouvez utiliser l’option refresh sur votre bouton pour rafraîchir, et vous pouvez définir des thèmes personnalisés de vos boutons avec themeroller qui est très simple à utiliser, comme ça les boutons sont en harmonie avec votre le thème de votre site Internet, je vous conseille de toujours personnaliser les thèmes jQuery UI avec votre site Internet, ce sera beaucoup plus sympa.

Exemple de boutons

On regarde le code source ensemble, alors là, vous avez tous les boutons, comment les boutons sont créés ?
On peut mettre une boîte de dialogue, ça doit afficher une boîte de dialogue avec le bouton fermer, voilà c’est bien ça, si je regarde le code source, c’est sur le bouton avec le modèle, les boites de dialogue vous connaissez par cœur maintenant, je ne m’étend pas dessus, par contre les boutons, alors là ça permet de créer un bouton, vous avez forcément un champ input avec button, alors je vais un peu plus loin, voilà le champ input bouton, cliquez ici, et qu’est-ce qu’on a fait dans ce champ input, on a rajouté des images ici, avec les options, une image à droite, une image à gauche, tout simplement. Là les boutons radio, les boutons checkbox, on les créé, comment ça marche ?
Même chose, vous définissez vos boutons radio, vos checkbox ici, avec le contenu tout, et après avec l’ID vous entrez un bouton avec bouton set, tout simplement, et vous pouvez sélectionner toutes les checkbox d’un seul coup, vous avez votre bouton select et deselect pour sélectionner toutes les checkbox d’un seul coup et les désélectionner.
Vous cliquez sur le bouton qui a des images, ça, ça vient du serveur, vous avez un fichier ici, PHP qui fait un echo, avec le fichier PHP vous pouvez très bien interroger une base de données, ce que vous voulez, faire du contenu entièrement dynamique, ici vous remarquez qu’on ne peut plus cliquer en-dessous, c’est bloqué, on peut juste défiler le texte et l’afficher, voilà, là on peut recliquer, votre langage préféré ça c’est un bouton radio, et ça c’est des checkox, vous pouvez en cocher plusieurs, vous désélectionnez, cochez tout, désélectionner, cocher tout, voyez c’est beaucoup plus sympa d’afficher vos formulaires sous cet forme-là, votre langage préféré, quel langage utilisez-vous, sélectionner tous, voilà, et regardez le code source est relativement simple, comme d’habitude vous utilisez des divs avec des formulaires, ou pas, juste un input, des boutons et ici, vous les transformez avec jQuery UI, tout simplement, sélectionnez tous, juste un seul et vous choisissez votre langage préféré, pour afficher un bouton avec des images.

Votre plan d’actions !

On a vu pas mal de chose, beaucoup d’options avec les boutons, à vous de jouer maintenant, si vous avez des questions posez-les sous ce cours vidéo, comme d’habitude sur Développement Facile sous ce cours retrouvez le code source complet et commenté en téléchargement pour que vous puissiez l’utiliser dans vos sites Internet. Et je vous invite à aller voir la deuxième vidéo, au-dessus de moi il y a une image vidéo 2 ou en-dessous de cette vidéo, vidéo 2, dans la deuxième vidéo je vous explique comment aller plus loin dans votre expertise avez jQuery, l’extension jQuery UI, et l’extension Dojo, je vous accompagne pendant quatre mois, ensemble, vous allez progresser à la vitesse de l’éclair dans la maîtrise de ces Frameworks, je vous invite à consulter la deuxième vidéo, là au-dessus, ou en-dessous, et en attendant, je vous dis à très bientôt sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple buttons jQuery UI

Et voici le code source pratique du cours sur jQuery UI.

Téléchargement du code source Exemple de création de boutons avec jQuery UI

Cliquez ici pour télécharger le code source Exemple de création de boutons avec jQuery UI

Partagez vos ressources sur les boutons jQuery UI

Utilisez le formulaire ci-dessous, pour partager le code source de vos applications mettant en oeuvre les buttons du Framework jQuery UI.

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Développer des Applications JavaScript Performantes — dès la semaine prochaine ?

TÉLÉCHARGEZ : Les codes sources du livre « JavaScript Facile » pour Créer VOS Applications — dès la semaine prochaine !

Cliquez ici pour tout recevoir >>