Nous développons une application mobile utilisant jquery mobile et apache cordova. Après avoir migré vers jquery mobile 1.4.0, nous sums passés au panneau externe, mais le panneau pose problème.
Il y a un exemple simple du problème dans http://jsfiddle.net/Q58MZ/3/
Pour reproduire le problème, vous devez: 1 cliquer sur page1 du lien de menu 2 cliquer sur page2 du lien de menu 3 cliquer sur page1 du lien de menu 4 cliquer sur page2 du lien de menu 5 cliquer sur le lien “ALLER À LA PAGE 1” le contenu
Ensuite, le menu ne s’ouvrira pas, il appenda des classes qui s’ouvriront mais il ne s’ouvrira pas.
Voici l’exemple de code pour le reproduire:
$(document).ready(function() { $.mobile.defaultPageTransition = 'none'; $("#mypanel").panel(); }); $(document).bind('panelbeforeopen', function(e, data) { console.log("before open"); }); $(document).bind('panelbeforeclose', function(e, data) { console.log("before close"); });
La chose étrange est que lorsque je navigue dans les liens du panneau, celui-ci fonctionne, mais lorsque je clique sur un lien qui ne figure pas dans le panneau, il ne s’ouvre plus. Nous avons également essayé avec $ .mobile.changePage et le nouveau avec le: pagecontainer mais c’est la même chose. Si quelqu’un a un problème similaire, dites-moi comment il le résout. Merci d’avance.
Omar a raison le $.mobile.defaultPageTransition = 'none';
est la cause du problème quand je l’ai supprimé tout fonctionne.
EDIT: Il est corrigé dans jquery mobile 1.4.2, voir https://github.com/jquery/jquery-mobile/issues/6650
Grâce à la suggestion de Cvetan, j’ai pu résoudre ce problème en utilisant une animation personnalisée:
.dummy.in{} .dummy.out{} .in{-webkit-animation-timing-function: ease-out;-webkit-animation-duration: 0ms;-moz-animation-timing-function: ease-out;-moz-animation-duration: 0ms;} .out{-webkit-animation-timing-function: ease-in;-webkit-animation-duration: 5ms;-moz-animation-timing-function: ease-in;-moz-animation-duration: 5ms;}
Ensuite, j’ai dit à jqm d’utiliser cette transition par défaut avec:
$.mobile.defaultPageTransition = 'dummy';
Et c’est tout, pas d’animation de transition de page visible et un panneau de travail complet.