Aller au contenu

Les méthodes et les propriétés les plus importantes du framework jQuery Mobile

Découvrez les méthodes et les propriétés, du Framework jQuery Mobile, les plus utiles qui serviront dans la création de vos applications pour les smartphones et les tablettes.

Apprenez à rafraîchir la page, manipuler les champs d’un formulaire, manipuler une URL ou afficher un message de chargement.

Tout est dans la formation ci-dessous.

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

Les méthodes et les propriétés les plus importantes du framework jQuery Mobile

Bonjour à tous et bienvenu sur Développement Facile.

Encore un nouveau cours dédié à jQuery Mobile, dans ce cours vous allez apprendre toutes les, enfin je ne vous donne pas toutes les méthodes et les propriétés mais en tout cas les méthodes qui vous seront le plus utiles avec les propriétés qui serviront dans la création de vos applications pour les Smartphones et les tablettes avec le Framework jQuery Mobile.

Rafraichir la page

Par exemple vous avez une option pour rafraîchir la page, lorsque jQuery Mobile reçoit une page du serveur, il analyse toutes les balises, il applique des styles CSS, et après il affiche la page dans des formats assez sympas pour l’internaute. Par contre si vous modifiez la page après son affichage, en manipulant le DOM, les nouveaux éléments créés vont être affichés au format classique HTML, il existe la méthode refresh de jQuery Mobile, pour forcer jQuery Mobile à rafraîchir ces élément et les afficher au format jQuery Mobile, la méthode refresh ça s’applique à plusieurs éléments comme les listes, tout ce qui est élément formulaire, checkboxradio, slider, les boutons, les menus, je vous ai mis un exemple en dessous des éléments qui peuvent accepter cette option refresh.

Manipuler les champs de formulaire

Vous avez également la possibilité de manipuler tous les champs de formulaire, les activer, les désactiver, il y a plusieurs méthodes pour manipuler les formulaires, vous pouvez modifier les menus, donc selectmenu, textinput pour activer, désactiver une zone de texte, checkboxradio pareil, pour activer ou désactiver une checkbox, les sliders c’est les curseurs pour les activer, les désactiver de la même façon vous pouvez activer ou désactiver des boutons, tout ça avec jQuery Mobile vous pouvez le faire très facilement, pensez-y si vous attendez, par exemple, vous pouvez sur un formulaire, desactiver par défaut le bouton valider, et tant que l’utilisateur n’a pas remplis tous les champs obligatoires du formulaire, ça vous pouvez le vérifier via un bout de ligne JavaScript en utilisant jQuery, dès qu’il a renseigné tous les champs obligatoires, le bouton valider s’active automatiquement, c’est un exemple d’utilisation.

Message chargement en cours

Vous avez aussi le message chargement en cours, lorsque jQuery effectue du chargement Ajax, il peut afficher un pop-up chargement en cours, soit un message, soit une icône, et bien tout ça, vous avez l’option loading pour afficher le message ou le cacher, vous pouvez également personnaliser ce message loading, changer le thème, mettre un texte en français, afficher que le texte, mettre du contenu html comme vos propres images, toutes les possibilités sont ouvertes avec jQuery Mobile vous avez la liste, je vous montrerais un exemple du message loading tout à l’heure.

Manipuler une URL

Vous pouvez également manipuler les url, on l’a vu dans le cours précédent, pour récupérer #identifiant on a utilisé mobile.path.parseUrl, avec l’option h justement pour récupérer #identifiant et avec l’évènement Pagebeforeconcreat, modifier le DOM avec jQuery Mobile, donc là je vous ai mis toutes les méthodes pour manipuler les url, parthUrl, makePathAbsolute, je vous laisserais mettre la vidéo sur pause, c’est expliqué en français, le mieux c’est que vous testiez directement ces options dans vos applications pour mobile, comme ça vous verrez directement le fonctionnement.

Vous avez également l’option mobile.path.parseUrl, ça retourne un objet qui contient différentes propriétés. Dans le cours précédent on a utilisé comme je vous l’ai dit, parseUrl avec l’objet que vous avez fait retourner, et on utilisait .h mais vous avez la propriété href, hostname, host, pathname, port, protocol. search, ça va vous permettre de, si vous passez des paramètres en get avec l’URL, avec search vous pouvez récupérer ces paramètres, par exemple, là vous avez l’option h ça récupère # et l’identifiant de votre URL, comme ce qui a été fait dans le cours précédent, je vous laisse mettre la vidéo sur pause, et lire en français, et vous pourrez tester les différentes propriétés de la méthode parse URL, par vous-même.

Exemple d’application

Je vous montre un exemple de code source en application comme ça, ça vous parlera mieux. Alors, donc dans le code source, ça je vous l’ai déjà expliqué dans les cours précédent pour modifier les options avant le chargement, l’inclusion de jQuery Mobile, bien avant, pareil ici, ça modifie un champ de l’utilisateur, pour l’activer ou le désactiver lorsque l’utilisateur clique sur un bouton, là dans le cas c’est activer, par exemple, « bonjour tout le monde », il est activé, je le désactive, je ne peux plus l’effacer même s’il est sélectionné avant, je ne peux plus rien faire, impossible, et là je réactive le champ texte, je vais le laisser désactivé, vous avez la possibilité de  modifier le message de chargement par défaut, donc par défaut avec du texte, avec du texte et l’image de fond, le cacher, donc message par défaut, là par défaut c’est une icône, le texte seul chargement en cours, le message complet chargement en cours.

Est-ce qu’il y a toujours l’option CSS avec le background, je vais modifier le background de la page, donc il est toujours désactiver, activer, désactiver, et je vous remontre avec les différentes modifications, le message complet, le message seul chargement en cours, et le message, l’icône par défaut de chargement lorsqu’on clique sur un lien html appelé via Ajax.

Qu’est-ce que vous avez d’autre ? Le mode portrait, orientation de change, là pour l’instant on s’en sert pas parce que c’est du cours précédent, donc je le supprime. Vous avez la possibilité de rajouter un formulaire en direct, je clic ici, un formulaire est ajouté directement, très puissant jQuery Mobile, voilà c’était surtout pour activer, désactiver le texte, bonjour, je le re désactive, afficher le message de chargement, message seul, là vous avez vraiment toutes les possibilités, pensez bien à inclure votre fichier jQuery Mobile après les différentes configurations, c’est très important.

Votre plan d’actions !

Maintenant c’est vraiment à vous de jouer, à travers, vous avez eu une bonne vingtaine de cous consacrés au jQuery Mobile, vous avez tout ce qu’il vous faut pour réussir vos applications pour les smartphones, pour les tablettes, sous ce cours vidéo vous retrouverez le code source complet, qui est utilisé dans ce cours, sous cette vidéo vous avez également la possibilité de poser toutes vos questions, maintenant je vous invite à consulter la deuxième vidéo, au-dessus de cette vidéo vous avez une icône cliquable, ou vous attendez la fin de cette vidéo, vous aurez un lien cliquable, c’est-à-dire, à la fin de la vidéo elle se transforme en clic cette vidéo, en lien cliquable, vous cliquez dessus et ça va vous renvoyer vers la deuxième vidéo, et dans la deuxième vidéo je vous explique comment vous pouvez apprendre toutes les possibilités du Framework jQuery, jQuery UI, jQuery Mobile, et Dojo, donc attendez la fin de cette vidéo, elle va se transformer en lien cliquable et on se retrouve tout de suite, dans la deuxième vidéo, donc je vous dis à tout de suite sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple de la vidéo

Retrouvez le code source commenté pour revoir les différentes méthodes et propriétés vues dans la vidéo.

Téléchargement du code source Exemple d'utilisations de méthodes et propriétés de jQuery Mobile

Cliquez ici pour télécharger le code source Exemple d'utilisations de méthodes et propriétés de jQuery Mobile

Partagez vos applications jQuery Mobile

Utilisez les commentaires pour nous montrer les applications que vous aurez développez avec jQuery Mobile.

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