Transition entre les pages dans jQuery Mobile

Question

Je travaille sur une application qui a quelques pages et est ici le flux:

page1 -> page2 -> page -> 3 -> page1

Maintenant, chaque fois que j'appuie sur le bouton de retour, si je suis à la page 1, je dois quitter l'application, et si je suis om d'autres pages, je dois revenir à la page précédente.

Si c'était le développement natif Android, nous avons Intents, que nous pouvons utiliser pour faire la transition entre les pages.

Je suis nouveau à jQuery mobile et Phonegap, avons-nous quelque chose de similaire à Intents dans Phonegap/jQuery mobile? Ou y a-t-il un autre moyen de faire ce qui précède?

Answer 1

transition Ajouter lorsque vous écrivez le code pour le bouton

Vous pouvez ajouter ce script sur le bouton clic:

$.mobile.changePage('URL', { options }); 

Jetez un oeil sur cette link

Answer 2

Permet de prendre votre carte d'identité de page pour la la page 1 est pageone.

Votre html serait quelque chose comme ça

<div data-role="page" id="pageone"> 
</div> 

Vous pouvez obtenir l'identifiant de la page en utilisant le script suivant

if($.mobile.activePage.attr("id") == "pageone"){ 
    // Code to exit or logout 
    } 

En utilisant condition ci-dessus, vous pouvez décider de quitter ou de procéder à la page précédente.

Le bouton Android vous ramène généralement à la page précédente que vous avez visitée. Donc, vous devez gérer le bouton retour android pour éviter d'être pris en page 3 de la page 1.

Enfin, il ressemblerait à quelque chose comme ci-dessous

function onDeviceReady() { 
    // Register the event listener 
    document.addEventListener("backbutton", onBackKeyDown, false); 
} 

// Handle the back button 
function onBackKeyDown() { 
    if($.mobile.activePage.attr("id") == "pageone"){ 
    // Code to exit or logout 
    } 
    else{ 
     history.back() 
    } 
} 

Je ne l'ai pas encore testé. Mais idéalement, cela devrait marcher pour vous.

Answer 3

Mayu est vraiment proche de la solution que j'ai utilisée dans mon application.

if($.mobile.activePage.attr('id') == 'pageone'){ 
    navigator.app.exitApp(); 
} else { 
    navigator.app.backHistory(); 
}