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

Avec le Framework jQuery Mobile, cela devient simple comme bonjour de crer des boutonstrs sympa. Tout est dans la formation ci-dessous.

jQLeadBrite("#leadplayer_video_element_53B961575A547").leadplayer(false, "eyJnYSI6dHJ1ZSwib3ZlcmxheSI6ZmFsc2UsInBvd2VyZWRfYnkiOmZhbHNlLCJwb3dlcmVkX2J5X2xpbmsiOiJodHRwOlwvXC93d3cucHJvZ3JhbW1hdGlvbi1mYWNpbGUuY29tXC8iLCJjb2xvcjEiOiIjRjVCQjBDIiwiY29sb3IyIjoiIzE3OThDRCIsImNvbG9yMyI6IiNGNUJCMEMiLCJ0eHRfc3VibWl0IjoiUkVDRVZPSVIgISIsInR4dF9wbGF5IjoiTGVjdHVyZSIsInR4dF9lbWwiOiJSZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X25hbWUiOiJSZW5zZWlnbmV6IHZvdHJlIFByXHUwMGU5bm9tLi4uIiwidHh0X2ludmFsaWRfZW1sIjoiU1ZQLCByZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X2ludmFsaWRfbmFtZSI6IlNWUCwgcmVuc2VpZ25leiB2b3RyZSBQclx1MDBlOW5vbS4uLiIsImxwX3NvdXJjZSI6IldQIFBsdWdpbiAxLjQuMi4xIFVubGltaXRlZCIsImlkIjoiNTNCOTYxNTc1QTU0NyIsIndpZHRoIjo5NDAsImhlaWdodCI6NTI5LCJ0aHVtYm5haWwiOiIiLCJ0aXRsZSI6IkNvbW1lbnQgY3JcdTAwZTllciByYXBpZGVtZW50IGRlcyBib3V0b25zIG1hZ25pZmlxdWVzIGF2ZWMgbGUgZnJhbWV3b3JrIGpxdWVyeSBtb2JpbGUiLCJkZXNjcmlwdGlvbiI6IkNvbW1lbnQgY3JcdTAwZTllciByYXBpZGVtZW50IGRlcyBib3V0b25zIG1hZ25pZmlxdWVzIGF2ZWMgbGUgZnJhbWV3b3JrIGpxdWVyeSBtb2JpbGUiLCJhdXRvcGxheSI6ZmFsc2UsInNob3dfdGltZWxpbmUiOnRydWUsImVuYWJsZV9oZCI6dHJ1ZSwib3B0IjpmYWxzZSwiY3RhIjp7InRpbWUiOiJlbmQiLCJidGV4dCI6IkNsaXF1ZXogaWNpIHBvdXIgUHJvZml0ZXIgZGUgbGEgUHVpc3NhbmNlIGRlcyBGcmFtZXdvcmtzIGpRdWVyeSBldCBEb2pvICEiLCJ1cmwiOiJodHRwOlwvXC93d3cucHJvZ3JhbW1hdGlvbi1mYWNpbGUuY29tXC9mb3JtYXRpb24tanF1ZXJ5LWRvam9cLyIsImF1dG9fZm9sbG93IjpmYWxzZSwibmV3X3dpbmRvdyI6ZmFsc2V9LCJ5bSI6InJ5TkRIbVYyWFpBIn0=");

Afficher le texte de la vidoComment crer rapidement des boutons magnifiques avec le framework jQuery MobileBonjour tous et bienvenu sur Dveloppement Facile. Pour la suite de cette srie de coursconsacrs au framework jQuery Mobile. L vous allez apprendre utiliser les boutons,transformer automatiquement tous vos liens href en boutons, plus facilement utilisable pour vosinternautes quand ils arrivent avec leurs smartphones ou leurs tablettes.Les boutons Et enplus vous aurez des boutons jQuery Mobile qui sont assez sympas, assez ergonomiques, avecune simple ligne de code, un simple attribut ajouter toutes vos balises. Il faut savoir quetoutes les balises relatives aux boutons dans les formulaires, sont automatiquement remises enforme par jQuery. Par dfaut le bouton occupe toute la largeur de la fentre du navigateur, cequi est comprhensible, vu que l'cran est rduit sur un priphrique mobile, que l'cran prennetoute la largeur c'est possible, avec la balise bouton, cliquez ici, voil, vous avez un bouton.Aprs 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 pouvezsupprimer l'effet sur le bouton, a fait un petit effet 3D en ombre, avec data-shadow = false, ava supprimer cet effet. Vous pouvez donc changer tous vos liens href en boutons avec un

1 / 3

simple attribut rajouter dans votre lien href, data-role = bouton, et a va crer un bouton, toutsimplement, un bouton jQuery Mobile. Par dfaut je vous ai mis les boutons qui occupe toute lalargeur de l'cran, a peut ne pas tre trs joli, vous pouvez choisir de dire jQuery Mobile quele bouton soit de la taille du texte qu'il y a dans le bouton avec data-inline = true, le bouton vas'adapter automatiquement la taille de votre texte qui peut tre trs sympa. Et bienvidemment vous pouvez ajouter des icnes vos boutons, je vous ai mis l, vous mettrezcette vido en pause, c'est le liste de toutes les icones disponibles avec data-icon l'attributicone, et vous spcifiez le nom de l'icne utiliser, flche droite, haut, bas, supprimer, plus,moins, contrler, la roue crante. Vous avez l'icne actualiser, en avant, en arrire, la grille,l'toile, l'alerte, l'info, home, l'accueil, et rechercher. Je vous ai mis tous les codes jQuery, ilsuffira de mettre la vido sur pause et vous pourrez les tester un par un si vous le souhaitezdans vos applications mobiles. Pour ajouter une icne, vous utilisez, comme je vous l'ai dit,l'attribut data-icon le nom de l'icne star, et vous pouvez positionner l'icne gauche, droite,au-dessus, en-dessous, ou sans le texte avec l'attribut data-iconpos, tout simplement. Je vousai mis un exemple de code source qui s'affiche sur cette vido. Vous pouvez bien videmmentcouper verticalement tous les boutons, si vous avez envie de crer un menu par exemple, ouhorizontalement donc soit en vertical, soit en horizontal, suivant quel type de menu vous voulezcrer, avec l'attribut data-role controlegroup et pour choisir horizontal ou vertical vous avezl'attribut data-type horizontal et donc une prsentation plus compacte des boutons avec l'attributdata-mini=true dans la balise div.Exemple d'application Je vous montre un exemple de codesource pour utiliser les boutons. Alors l vous avez diffrents boutons que vous avez djutiliss, comme d'habitude, on ajoute jQuery Mobile, jQuery UI et la feuille de style CSS, doncnotre page, vous connaissez, si vous ne connaissez pas, je vous renvoie au cours prcdentpour apprendre utiliser les diffrents div, page, header, content, et footer. On rentre ... lacration des boutons, on a les boutons l, trois boutons, ici, avec des thmes utiliss, situs icipar dfaut, sans effets d'ombre, avec le bouton rectangulaire ici, sans effets d'ombre avec unthme donc voil, les trois boutons, ensuite vous avez des textes, et vous pouvez intgrer unbouton juste aprs le texte avec une balise a href, tlcharger le code source, et avec uneicne, l'icne plus, vous pouvez mettre l'icne home, aussi si vous le souhaitez, ce ne sera pastrs parlant, a fait un peu bizarre donc je vais remettre l'icne plus, et vous pouvez avoir desgroupes de boutons comme vous avez ici, donc un groupe de boutons descriptifs avec uneicne livraison, bien videmment, vous mettez un lien derrire, ici, et un autre groupe deboutons, en horizontale et en verticale, a c'est vous qui choisissez avec jQuery Mobile, vousavez 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 charge via Ajax,parce que jQuery Mobile transforme tout en lien au format Ajax.Votre plan d'actions ! Vousavez vu c'est relativement facile de crer un bouton partir d'un lien, avec un code source trscourt. Vraiment jQuery Mobile est relativement simple utiliser, en fait a ne va pas changervos habitudes, vous allez peu prs utiliser les mmes balises, il y a certains attributs connatre, a c'est clair, mais pour le reste c'est assez facile. Maintenant c'est vous de jouerpour utiliser le framework jQuery Mobile dans vos applications, si vous avez des questionsposez-les directement sous ce cours vido, sous ce cours vido, vous retrouverez galement lecode 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 vousaider crer des sites rapidement, trs impressionnants, simple maintenir il y a une bannireen haut, cliquez sur le lien de cette image, a va vous renvoyer vers une nouvelle page ou vous

2 / 3

pourrez accder presque 100 cours ddis au framework jQuery, sinon vous attendez la finde cette vido, il y a un lien qui va se crer la fin de cette vido, vous cliquez sur ce lien, etvous serez renvoy vers une nouvelle page, attendez la fin de la vido, cliquez sur le lien qui vas'afficher sur la page, un lien cliquable, et vous allez pouvoir accder plusieurs vidos pourtout connaitre de jQuery. En attendant dire trs bientt sur Dveloppement Facile pour la suite.

Tlchargez l'exemple Button jQuery MobileEt voici le code source pour crer des boutons avec le Framework jQuery Mobile.

Downloads

Exemple de boutons avec jQuery Mobile

Code source comment pour crer des boutons avec le Framework jQuery Mobile. Lefichier zip contient galement jQuery Mobile version 1.4.2 et jQuery version 1.10.2

Dmonstration des possibilits de jQuery Mobile

Visualisez toutes les possibilits de jQuery Mobile avec cette application web.

Posez vos questions sur le coursPosez vos questions sur cette formation jQuery Mobile dans les commentairesci-dessous.Comment crer rapidement des boutons magnifiques avec le framework jQueryMobile

Powered by TCPDF (www.tcpdf.org)

3 / 3