Bouton de navigation circulaire mobile jquery

J'ai un problème avec le bouton de retour de l'application mobile jQuery. L'argument a été beaucoup discuté mais je dois encore trouver la bonne réponse.Bouton de navigation circulaire mobile jquery

J'ai 2 fichiers html: nous allons les appeler list.html et description.html

Chacun d'eux contient un seul data-role = "page".

Maintenant, la liste Je vais dans la description à l'aide

$.mobile.changePage('description.html')

dans la description que j'ai plusieurs liens que j'utiliser pour remplir la liste. Donc, en cliquant sur le lien que j'utilise

$.mobile.changePage('list.html')

ensuite de la liste, je peux aller à la description à nouveau et ainsi de suite.

Maintenant le problème est que si j'ouvre seulement 1 fois la liste et la description tout est parfait. Le bouton de retour fonctionne correctement. Mais quand j'ouvre une autre liste, elle ne l'ajoute pas aux divs à l'intérieur du corps, mais remplace l'ancienne. De cette façon, lorsque je clique sur la première liste, je vois le résultat du deuxième appel.

J'ai essayé avec

window.location = 'list.html'

mais il donne encore plus de problèmes. Et c'est plus lent.

J'espère avoir expliqué mon problème assez clairement. Je ne sais pas si cela semble confus.

J'espère que quelqu'un pourra vous aider. Merci.

EDIT:

J'ai oublié de mentionner que je l'ai essayé d'utiliser des classes pour identifier les pages (avec leur en-tête, le contenu et le pied de page) mais il n'a pas résolu le problème.

Source

2012-10-24 Ciack404

Vous résoudrez vos problèmes en utilisant quelque chose comme ceci:

<script> 
     $('#pageDescription').click(function(){ 
      $('yourdiv').html(content); 
      $.mobile.changePage('#pageList','slide'); 
     }); 
     $('#pageList').click(function(){ 
      $('yourdiv').html(content); 
      $.mobile.changePage('#pageDescription','slide'); 
     }); 
    </script> 
    <body> 
     <div data-role="page" id="pageDescription"> 
      //Your html from description.html 
     </div> 
     <div data-role="page" id="pageList"> 
      //Your html from list.html 
     </div> 
    </body>

Voir plus d'informations: http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html

Note: Vous ne pas oublier de préparer votre bouton de retour!

NOUVEAU CODE:

<script> 
    var oldHtml; 
    $('div li a').click(function(){ 
     oldHtml = $('yourdiv').html(); 
     $('yourdiv').html(content); 
     $.mobile.changePage('#pageDescription','slide'); 
    }); 
    $('a[data-icon=back]').click(function(){ 
     $('yourdiv').html(oldHtml); 
    }); 
</script> 
<body> 
    <div data-role="page" id="pageDescription"> 
     //Your html from description.html 
    </div> 
    <div data-role="page" id="pageList"> 
     <div data-role="header"> 
      <a data-role="button" data-icon="back" data-iconpos="notext"></a> 
     </div> 
     //Your html from list.html like this 
     <ul> 
      <li><a>link1</a></li> 
      <li><a>link2</a></li> 
     </ul> 
    </div> 
</body>

Source

2012-12-03 14:27:51

Désolé, mais cela ne résout pas la question de l'histoire: quand je crée une nouvelle description, il remplacera l'ancien. – Ciack404

Où allez-vous créer une nouvelle description? Cela dépend du lien sur lequel vous avez cliqué? Vous utilisez $ ('yourdiv'). Append ('newhtml') ;? –

Non Je dois effacer la div précédente: $ ('# mydiv'). Html (content); – Ciack404

Bouton de navigation circulaire mobile jquery

Répondre

Questions connexes