Aller au contenu

Comment créer rapidement des boutons magnifiques avec le framework jQuery Mobile

Avec le Framework jQuery Mobile, cela devient simple comme bonjour de créer des boutons très sympa.

Tout est dans la formation ci-dessous.

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

Comment créer rapidement des boutons magnifiques avec le framework jQuery Mobile

Bonjour à tous et bienvenu sur Développement Facile.

Pour la suite de cette série de cours consacrés au framework jQuery Mobile. Là vous allez apprendre à utiliser les boutons, transformer automatiquement tous vos liens href en boutons, plus facilement utilisable pour vos internautes quand ils arrivent avec leurs smartphones ou leurs tablettes.

Les boutons

Et en plus vous aurez des boutons jQuery Mobile qui sont assez sympas, assez ergonomiques, avec une simple ligne de code, un simple attribut à ajouter à toutes vos balises. Il faut savoir que toutes les balises relatives aux boutons dans les formulaires, sont automatiquement remises en forme par jQuery. Par défaut le bouton occupe toute la largeur de la fenêtre du navigateur, ce qui est compréhensible, vu que l’écran est réduit sur un périphérique mobile, que l’écran prenne toute la largeur c’est possible, avec la balise bouton, cliquez ici, voilà, vous avez un bouton.
Après vous avez les boutons rectangulaires, ils sont obtenus avec l’attribut data-corners = false, au lieu que vous ayez des coins arrondis ça fera un bouton rectangulaire, et vous pouvez supprimer l’effet sur le bouton, ça fait un petit effet 3D en ombre, avec data-shadow = false, ça va supprimer cet effet.

Vous pouvez donc changer tous vos liens href en boutons avec un simple attribut à rajouter dans votre lien href, data-role = bouton, et ça va créer un bouton, tout simplement, un bouton jQuery Mobile.
Par défaut je vous ai mis les boutons qui occupe toute la largeur de l’écran, ça peut ne pas être très joli, vous pouvez choisir de dire à jQuery Mobile que le bouton soit de la taille du texte qu’il y a dans le bouton avec data-inline = true, le bouton va s’adapter automatiquement à la taille de votre texte qui peut être très sympa.

Et bien évidemment vous pouvez ajouter des icônes à vos boutons, je vous ai mis là, vous mettrez cette vidéo en pause, c’est le liste de toutes les icones disponibles avec data-icon l’attribut icone, et vous spécifiez le nom de l’icône à utiliser, flèche droite, haut, bas, supprimer, plus, moins, contrôler, la roue crantée.

Vous avez l’icône actualiser, en avant, en arrière, la grille, l’étoile, l’alerte, l’info, home, l’accueil, et rechercher. Je vous ai mis tous les codes jQuery, il suffira de mettre la vidéo sur pause et vous pourrez les tester un par un si vous le souhaitez dans vos applications mobiles.

Pour ajouter une icône, vous utilisez, comme je vous l’ai dit, l’attribut data-icon le nom de l’icône star, et vous pouvez positionner l’icône à gauche, à droite, au-dessus, en-dessous, ou sans le texte avec l’attribut data-iconpos, tout simplement. Je vous ai mis un exemple de code source qui s’affiche sur cette vidéo.

Vous pouvez bien évidemment couper verticalement tous les boutons, si vous avez envie de créer un menu par exemple, ou horizontalement donc soit en vertical, soit en horizontal, suivant quel type de menu vous voulez créer, avec l’attribut data-role controlegroup et pour choisir horizontal ou vertical vous avez l’attribut data-type horizontal et donc une présentation plus compacte des boutons avec l’attribut data-mini=true dans la balise div.

Exemple d’application

Je vous montre un exemple de code source pour utiliser les boutons.
Alors là vous avez différents boutons que vous avez déjà utilisés, comme d’habitude, on ajoute jQuery Mobile, jQuery UI et la feuille de style CSS, donc notre page, vous connaissez, si vous ne connaissez pas, je vous renvoie au cours précédent pour apprendre à utiliser les différents div, page, header, content, et footer. On rentre … la création des boutons, on a les boutons là, trois boutons, ici, avec des thèmes utilisés, situés ici par défaut, sans effets d’ombre, avec le bouton rectangulaire ici, sans effets d’ombre avec un thème donc voilà, les trois boutons, ensuite vous avez des textes, et vous pouvez intégrer un bouton juste après le texte avec une balise a href, télécharger le code source, et avec une icône, l’icône plus, vous pouvez mettre l’icône home, aussi si vous le souhaitez, ce ne sera pas très parlant, ça fait un peu bizarre donc je vais remettre l’icône plus, et vous pouvez avoir des groupes de boutons comme vous avez ici, donc un groupe de boutons descriptifs avec une icône livraison, bien évidemment, vous mettez un lien derrière, ici, et un autre groupe de boutons, en horizontale et en verticale, ça c’est vous qui choisissez avec jQuery Mobile, vous avez l’avantage de pouvoir choisir l’affichage de votre bouton horizontal, là on est en verticale, et moi j’ai mis un #, mais là, vous mettrez le lien vers votre page qui sera chargée via Ajax, parce que jQuery Mobile transforme tout en lien au format Ajax.

Votre plan d’actions !

Vous avez vu c’est relativement facile de créer un bouton à partir d’un lien, avec un code source très court. Vraiment jQuery Mobile est relativement simple à utiliser, en fait ça ne va pas changer vos habitudes, vous allez à peu près utiliser les mêmes balises, il y a certains attributs à connaître, ça c’est clair, mais pour le reste c’est assez facile.
Maintenant c’est à vous de jouer pour utiliser le framework jQuery Mobile dans vos applications, si vous avez des questions posez-les directement sous ce cours vidéo, sous ce cours vidéo, vous retrouverez également le code source complet, et si vous souhaitez aller plus loin dans l’utilisation de jQuery, jQuery UI, jQuery Mobile, Framework Dojo, des framework JavaScript qui sont les plus utiles qui vont vous aider à créer des sites rapidement, très impressionnants, simple à maintenir il y a une bannière en haut, cliquez sur le lien de cette image, ça va vous renvoyer vers une nouvelle page ou vous pourrez accéder à presque 100 cours dédiés au framework jQuery, sinon vous attendez la fin de cette vidéo, il y a un lien qui va se créer à la fin de cette vidéo, vous cliquez sur ce lien, et vous serez renvoyé vers une nouvelle page, attendez la fin de la vidéo, cliquez sur le lien qui va s’afficher sur la page, un lien cliquable, et vous allez pouvoir accéder à plusieurs vidéos pour tout connaitre de jQuery. En attendant dire très bientôt sur Développement Facile pour la suite.

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple Button jQuery Mobile

Et voici le code source pour créer des boutons avec le Framework jQuery Mobile.

Téléchargement du code source Exemple de boutons avec jQuery Mobile

Cliquez ici pour télécharger le code source Exemple de boutons avec jQuery Mobile

Téléchargement du code source Démonstration des possibilités de jQuery Mobile

Cliquez ici pour télécharger le code source Démonstration des possibilités de jQuery Mobile

Posez vos questions sur le cours

Posez vos questions sur cette formation jQuery Mobile dans les commentaires ci-dessous.

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 >>