Travailler avec l'Auto-initialisation de jQuery Mobile
Contrairement à d'autres projets jQuery, tels que jQuery et jQuery UI, jQuery mobile applique automatiquement de nombreuses améliorations au niveau des balises dès qu'il est chargé (bien avant que l'évènement document.ready soit déclenché). Ces améliorations sont appliquées en fonction de la configuration par défaut de jQuery Mobile, qui est conçue pour fonctionner avec des scénarios communs, mais qui peut correspondre ou non à vos besoins particuliers. Heureusement, ces paramètres sont faciles à configurer.
L'événement mobileinit
Lorsque jQuery mobile commence à s'exécuter, il déclenche un événement mobileinit sur l'objet document, auquel vous pouvez vous lier avec la méthode bind() pour remplacer les paramètres par défaut de jQuery Mobile.
$(document).bind("mobileinit", function(){
/**
* insérez vos modifications ici
*/
});
Parce que l'événement mobileinit est déclenché immédiatement après l'éxécution, vous devez lier votre gestionnaire d'événements avant que jQuery Mobile ne soit chargé. Par conséquent, il est recommandé d'appeler vos fichiers JavaScript en respectant l'ordre suivant :
<script src="jquery.js"></script> <script src="votre-script-personnalise.js"></script> <script src="jquery-mobile.js"></script>
Au sein de cette liaison événement, vous pouvez configurer les paramètres par défaut, soit par l'extension de l'objet $.mobile en utilisant la méthode jQuery $.extend :
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
foo: bar
});
});
... soit en les configurant individuellement :
$(document).bind("mobileinit", function(){
$.mobile.foo = bar;
});
Pour pré-visualiser rapidement ces options de configuration globales en actions, consultez les pages test de configuration.
Options configurables
Les valeurs par défaut suivantes sont configurables via l'objet $.mobile :
ns
ns string, par défaut: ""
Espace de nommage utilisé dans les attribut data-, par exemple, data-role. Peut être configuré sur n'importe quoi, y compris une chaine vide qui est la valeur par défaut. Lors de l'utilisation, il est plus clair, si vous insérez un tiret, comme "monespacedenommage-" qui correspond à data-monespacedenommage-foo="...".
NOTE : si vous utilisez les espaces de nommage data-, vous devrez mettre à jour / ignorer manuellement un sélecteur CSS dans le thème. Les sélecteurs de données suivants devront intégrer l'espace de nommage que vous souhaitez utiliser :
.ui-mobile [data-monespacedenommage-role=page], .ui-mobile [data-monespacedenommage-role=dialog], .ui-page { ...
autoInitializePage
autoInitializePage booléen, par défaut : true
Lorsque le DOM est prêt, le framework devrait appeler automatiquement $.mobile.initializePage. Définir sur false, la page ne sera pas initialisée, et sera visuellement cachée jusqu'à ce que $.mobile.initializePage soit appelé manuellement.
subPageUrlKey
subPageUrlKey string, par défaut : "ui-page"
Le paramètre url utilisé pour le référencement des widgets sous-pages (tels que ceux générés par les listes imbriquées). Traduit en exemple.html&ui-page=souspageIdentifiant. Le segment hash avant &ui-page= est utilisé par le framework pour créer une requête Ajax vers l'URL où la sous-page existe.
activePageClass
activePageClass string, par défaut : "ui-page-active"
La classe attribuée à la page actuellement visible, et pendant les transitions
activeBtnClass
activeBtnClass string, par défaut : "ui-btn-active"
La classe utilisée pour le bouton à l'état actif, depuis le CSS du framework.
ajaxEnabled
ajaxEnabled booléen, par défaut : true
jQuery mobile traitera automatiquement les clics sur les liens et la soumission de formulaire à l'aide d'Ajax, lorsque cela est possible. Si réglé sur false, l'écoute du hachage URL sera désactivée, et les URLs se chargeront via des requêtes HTTP classiques.
hashListeningEnabled
hashListeningEnabled booléen, par défaut : true
jQuery mobile écoutera et gérera automatiquement les changements du location.hash. Sa désactivation empêchera jQuery mobile de traiter les changements de hachage, ce qui vous permet de les gérer vous-même, ou encore pour une utilisation simple de liens profonds dans un document qui défilent vers un ID particulier.
pushStateEnabled
pushStateEnabled booléen, par défaut : true
Amélioration pour utiliser history.replaceState dans les navigateurs compatibles, pour convertir l'URL basée sur le hachage Ajax dans le chemin complet du document. Notez que nous vous recommandons de désactiver cette fonction si Ajax est désactivé ou en cas d'utilisation intensive de liens externes.
defaultPageTransition
defaultPageTransition string, par défaut : 'slide'
Configure la transition par défaut pour les changements de page via Ajax. Définir sur 'none' pour aucune transition par défaut.
touchOverflowEnabled
touchOverflowEnabled booléen, par défaut : false
Active les transitions de pages en douceur et les barres d'outils fixes dans des dispositifs qui supportent à la fois les propriétés CSS overflow: et overflow-scrolling: touch;.
defaultDialogTransition
defaultDialogTransition string, par défaut : 'pop'
Configure la transition par défaut pour les changements de dialogue qui utilisent Ajax. Définir sur 'none' pour aucune transition par défaut.
minScrollBack
minScrollBack string, par défaut : 150
Distance minimale de défilement qui sera rappelée lors du retour sur une page.
loadingMessage
loadingMessage string, par défaut : "loading"
Configure le texte qui apparaît quand une page se charge. Si défini sur false, le message n'apparaîtra pas du tout.
pageLoadErrorMessage
pageLoadErrorMessage string, par défaut : "Error Loading Page"
Configure le texte qui apparaît lorque le chargement d'une page échoue via Ajax.
gradeA
gradeA fonction qui retourne un booléen, par défaut : une fonction retournant la valeur de $.support.mediaquery
Toutes les conditions de soutien qui doivent être respectées pour passer.