Découvrez les options principales du framework jQuery Mobile

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

Découvrez les options les plus couramment utilisées avec jQuery Mobile et apprenez à vous en servir.

Vous verrez l’événement mobileinit, et les options activeBtnClass, ajaxEnabled, allowCrossDomainPages, autoInitializePage, buttonMarkup.hoverDelay, defaultDialogTransistion, defaultPageTransistion, orientationChangeEnabled et pageLoadErrorMessage.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title=”Afficher le texe de la vidéo”]

Les options principales du framework jQuery Mobile

Bonjour et bienvenu sur développement facile.  Donc ensemble on continue ce cours dédié à jQuery mobile et là je vais vous présenter les options les plus courantes que vous allez utiliser avec jQuery mobile comme ça, ça va vous permettre de personnaliser votre site suivant vos préférences, les interactions que vous souhaitez ajouter avec vos utilisateurs.

Les options – L’événement mobileinit

Donc vous avez l’événement mobileinit donc dès le traitement de jQuery Mobile, en fait jQuery Mobile exécute le code de votre page et le modifie à la volé, par exemple les liens href sont transformés pour être traité via Ajax. Les paysages Les balises sont mises en forme via le CSS etc. etc. il y a des transitions de pages, les éléments de formulaire … et tout cela se passe avant le classique document.ready du framework jQuey. Donc si vous voulez effectuer des modifications de certaines options par défaut pour initier événement qui s’appelle mobileinit, pour configurer justement les paramètres de jQuery mobile. Donc comme jQuery mobile commence à fonctionner dès qu’il est chargé, le gestionnaire d’événement mobileinit est créé avant l’inclusion du fichier JavaScript jQuery mobile, donc pensez bien à créer vos options vos paramètres de jQuey Mobile avant son inclusion.

Donc je vous ai mis un exemple de code source, “bind”  vous allez écouter l’événement mobileinit et mettre vos paramètres personnalisés jQuery Mobiles et juste après vous incluez le fichier JavaScript jQuery Mobile.

Les options – activeBtnClass

Vous avez activeBtnClass. La valeur par défaut c’est ui-page-active donc ce paramètres contrôle la classe CSS utilisé par jQuery mobile pour la page qui est actuellement visible, et pour les transistions. Donc la valeur par défaut jQuery mobile utilise les feuilles de style, prévu pour data-role égale page. Mais  vous pouvez définir vos propres feuilles de style, vous pouvez ajouter  des classes CSS à la présentation de la page, donc il suffit de spécifier la classe CSS que vous souhaitez utiliser donc dans l’événement mobileinit, je vous ai mis un exemple de code source. Donc cela vous permet par exemple de définir une seule classe CSS qui sera utilisée partout au lieu de modifier la classe CSS de jQuery mobile. Donc c’est très très simple de personnaliser la classe les éléments CSS de jQuery avec cette possibilité-là.

Les options – ajaxEnabled

Vous avez ajaxEnabled. La valeur par est true, c’est à dire que les jQuery mobile écoute tous les clics sur les liens et les traite en utilisant Ajax pour intégrer la ressource des cibles dans le DOM de la page. Cela permet une consultation beaucoup plus de fluide du site et d’ajouter des effets de transitions entre les pages mais vous pouvez tout à fait désactiver Ajax et utiliser les requêtes HTTP classique c’est vous qui choisissez. Par exemple vous voulez vous assurer que la page courante est complètement remplacée par une page cible pour des raisons de mise en cache et de sécurité, vous pouvez désactiver Ajax avec l’option ajaxEnabled = false. Donc vous avez un exemple de code source sur votre écran.

Les options – allowCrossDomainPages

Vous avez également l’option allowCrossDomainPages. Donc la valeur par défaut est false. C’est-à-dire jQuery Mobile charge via Ajax uniquement si les pages se situent sur le même domaine que la page courante. C’est évident pour des raisons de sécurité, ça évite les faille XSS, pour manipuler l’adresse Ajax. Mais par exemple si votre application charge des pages mobiles d’un autre domaine que celui de la page courante, vous avez l’option allowCrossDomainPages, vous la mettez à true dans l’événement mobileinit et donc ça va permettre de charger via Ajax les pages qui sont dans d’autres domaines. Par contre, faites bien attention en utilisant cette option parce que ça peut mettre en danger la sécurité de votre site Web mobile donc à utiliser avec parcimonie allowCrossDomainPages, je vous conseille de le laisser à false par défaut.

Les options – autoInitializePage

Vous avez autoInitializePage. Donc la valeur par défaut est true, c’est-à-dire que jQuery mobile par défaut s’exécute, initialise la page, modifie les balises, applique le style CSS et affiche la page. Mais vous pouvez souhaiter de manipuler les balises du code source de la page avant qu’elle soit traitée par jQuery mobile donc il existe l’option autoInitializePage. Pareil, vous écoutez l’événement mobileinit, vous mettez votre autoInitializePage à false, et par défaut maintenant la page ne sera pas initialisé, ne sera affichée. Donc vous pouvez effectuer toutes les modifications dans le code que souhaiter et pour relancer le traitement jQuery mobile et afficher la page vous utilisez $.mobile.initializePage().

Les options – buttonMarkup.hoverDelay

Vous avez l’option buttonMarkup.hover.Delay . Donc la valeur par défaut c’est 200. Donc ça définit le délai pour ajouter les classes hover et down sur les interactions tactiles sur les boutons jQuery Mobile. Si vous réduisez le délai ça va donner à l’utilisateur l’impression  d’une application plus fluide. Je vous conseils de laisser le délai par défaut  il est très très bien pour faire les effets over et down sur les boutons. Après à vous de voir suivant l’impression que vous voulez donner à vos internautes.

Les options – defaultDialogTransition

Vous avez defaultDialogTransition. Donc la valeur par défaut est pop et ça permet de de modifier toutes les transitions par défaut des popups. Donc comme d’habitude vous écoutez l’événement mobeinit et vous changez la condition par défaut sur les popups donc defaultDialogTransition = « slide » par exemple. Donc ça veut dire toutes les fenêtres de dialogue apparaîtrons avec l’effet slide. Ce sont des options assez sympa, ça va vous permettre de personnaliser complètement votre site internet sur les smartphones et les tablettes.

Les options – defaultPageTransistion

defaultPageTransistion c’est le même principe de fonctionnement. Par défaut jQuery Mobile applique la transition pad sur toutes les pages qui utilise Ajax. En écoutant l’événement mobileinit, ça s’affiche sur votre écran, defaultPageTransistion vous pouvez mettre la transition par défaut slide, c’est à dire toutes les transitions de pages de votre application auront un effet slide.Mais vous pouvez comme je vous l’ai expliqué dans les cours précédents utilisez l’option, enfin  l’attribut data-transition pour déterminer le type de transition sur un élément défini. Donc à vous de voir, vous avez deux possibilités pour définir les transitions.

Les options – orientationChangeEnabled

Vous avez également orientationChangeEnabled. Donc la valeur par défaut c’est true. jQuery Mobile déclenche l’événement orientationchange lorsque l’internaute, avec son mobile, passe du mode portrait au mode paysages et inversement. Selon le navigateur utilisé la largeur et la hauteur de la fenêtre ne change pas toujours exactement au même moment que l’événement orientationchange est envoyée par le navigateur. Pour éviter un décalage de la hauteur et la largeur avec … quand l’utilisateur a bougé l’écran. Vous pouvez fixer orientationchange  à false pour forcer jQuery Mobile à utiliser l’événement resize du navigateur. Cela permet de synchroniser l’évènement orientationchange et les dimensions de la fenêtre qui du fait de l’orientation de l’écran. Ça, à vois, à vous de l’utilisé si jamais vos utilisateurs se plaignent de problème de dimensions de l’écran ; qui ne se fait pas assez rapidement. A vous de voir, ça se fait au cas par cas en fait.

Les options – pageLoadErrorMessage

Vous avez pageLoadErrorMessage. La valeur par défaut et Error Loading Page. Vous avez un lien dans votre application mobile  qui renvoie sur une erreur 404 ça va affihcer un message en anglais Error Loading Page, pas terrible vous me direz c’est claire. Avec jQuery mobile il est possible de franciser ce message. Pareil vous écoutez l’événement mobileinit et pageLoadErrorMessage, vous mettez votre message d’erreur en français ou dans une autre langue. Très pratique, si il y a une erreur 404, ça affichera le message, erreur de chargement de la page, un message en français que l’utilisateur puisse comprendre.

Exemple d’application

Donc je vous montre un exemple de code source de ces différentes options. Alors par exemple : remarquer mobile.jquery.js qui est inclus après les options. Donc  activePageClass j’ai définit une classe personnaliser qui est ici, avec j’ai juste changer le background et la taille de la police. Par exemple je vais mettre 16 dans la taille de la police, le background est là, donc si je recharge, la police s’affiche  beaucoup plus grosse par défaut et là erreur de chargement de la page, donc j’ai une lien vers une erreur 404 erreur du chargement de la page. là il n’y a pas d’erreur 404, tout ça, il n‘y a pas d’erreur. Par contre sur ce lien, erreur 404, erreur du chargement de la page. Je peux mettre une erreur 404, par exemple ici 404.html, erreur 404 sur accueil, l’utilisateur clique sur accueil, erreur  du chargement de la page. La page s’est bien chargée, la page s’est bien chargée, erreur du chargement de la page, ça s’est bien chargé, erreur du chargement de la page, donc un lien un bête lien nolink.html ou 404.html.

Votre plan d’action

Maintenant, c’est à vous de jouer, modifiez les options par défaut de jQuery selon vos besoins comme vous avez vu dans l’exemple précédent j’avais changé le background de couleur la taille de police un message sur les erreurs 404 de pages introuvables, envoyé un message en français. A vous de jouer retrouver sous cette vidéo le code source que vous pouvez réutiliser dans vos applications pour les smartphones, les tablettes. Si vous avez des questions posez-les directement sous cette vidéo maintenant vous allez avoir la deuxième vidéo, une image qu’il y a juste au-dessus de cette vidéo ou alors vous patientez quelques secondes, la vidéo va se transformer en lien cliquable et vous allez pouvoir accéder à la deuxième vidéo. Donc dans la deuxième vidéo vous allez découvrir tout ce qui est nécessaire, pour accéder à des vidéos professionnelles pour apprendre à utiliser jQuery, jQuery UI, jQuery Mobile dans les moindres détails, le framework dojo également dans les moindres détails donc patientez la fin de cette vidéo se termine en quelques secondes, elle va se transformer en lien cliquable, et vous vous retrouverez sur la deuxième vidéo pour la suite, moi je vous dis à tout de suite sur développement facile.

[/ppmtoggle] [/ppmaccordion]

Télécharger l’exemple d’utilisation des options de jQuery Mobile

Et voici le code source commenté montrant l’utilisation des principales options de jQuery Mobile avec l’événement mobileinit.

Downloads

  • Les options de jQuery Mobile
    Les options de jQuery Mobile

    Code source commenté avec utilisation des options jQuery Mobile.
    Le fichier zip contient également jQuery Mobile version 1.4.2 et jQuery version 1.10.2

Partagez vos code sources également !

Profitez-en vous aussi, pour partager le paramétrage de vos options jQuery Mobile dans votre code source.

Créez Rapidement des Sites Hyper-Interactifs avec vos utilisateurs grâce à la Formation Gratuite jQuery Facile !

Recevez les Stratégies pour utiliser le Potentiel des Frameworks jQuery et Dojo
+
Logo jQuery
+
Des Tutoriels Gratuits Supplémentaires pour utiliser toute la "Richesse" du Framework de Google : AngularJS