JQuery Mobile, le bouton de retour de liste imbriqué a disparu?

dans la dernière version de jQuery Mobile, la façon d'ajouter un bouton back est d'ajouter 'data-add-back-btn="true"' à votre "page" div.

Cela fonctionne très bien. Cependant, en regardant un sous-menu de liste imbriqué le bouton de retour n'est plus là.

en regardant le code de sortie, il semble que ce qui se passe est, jQuery mobile cache votre "page" div d'origine, et en créer un nouveau (sans l'attribut de bouton arrière mis à true).

je n'ai pas de démo URL pour le moment, mais vous pouvez voir le problème en action à la page de démonstration http://jquerymobile.com/test/docs/lists/lists-nested.html

ma question Est, est-ce qu'il y a quelque chose que je dois ajouter, qui lui dira d'ajouter un bouton arrière pour les menus imbriqués? et si ce n'est pas le cas, y a-t-il un moyen que je puisse le hacker pour ajouter automatiquement l'attribut back-button à toutes les divs "page"?

appréciez toute aide sur ce problème.

18
demandé sur Philip Kirkbride 2011-06-29 18:14:34

3 réponses

quelque Chose comme cela devrait vous aider:

$(':jqmData(url^=MYPAGEID)').live('pagebeforecreate', 
  function(event) {
    $(this).filter(':jqmData(url*=ui-page)').find(':jqmData(role=header)')
      .prepend('<a href="#" data-rel="back" data-icon="back">Back</a>')
  });

Remplacer MYPAGEID avec l'ID de la page contenant la liste.

l'événement sera déclenché lorsque la sous-page est créée dynamiquement et insérera le bouton arrière comme premier élément dans l'en-tête. Cela sera alors repris et rendu agréable lorsque la magie jQueryMobile est lancée automatiquement après coup.

le filtrage est un peu bizarre car vous ne pouvez pas faire référence au ui-page dans le premier sélecteur (il trébuche sur le & dans le data-url et il semble que vous ne pouvez pas utiliser un filtre avant le .live()) sans ce filtrage supplémentaire, vous obtenez également le bouton back sur la page parent.

15
répondu slite 2011-07-06 18:22:55

Eu le même problème, voici une solution:

comme le bouton back est maintenant désactivé par défaut, vous devez l'activer avant de charger jQuery mobile (et après avoir chargé jQuery):

    <script type="text/javascript">
$(document).bind("mobileinit", function() {
      $.mobile.page.prototype.options.addBackBtn = true;
 });    
</script>   

maintenant, comme le bouton arrière de jQuery est bogué à lui seul, vous le verrez parfois apparaître là où il ne devrait pas être. Pour éviter cela, ajoutez les lignes suivantes à votre conteneur de page:

data-add-back-btn="false"

ceci empêchera le bouton arrière de devenir confus par rafraîchissement de page et de montrer où il ne devrait pas l'être.

12
répondu CodeVirtuoso 2011-09-15 23:52:09

s'inspirant de la ci-dessus posté exemple, c'est comment j'ai pu ajouter le bouton de Retour à mes listes imbriquées.

ce que je faisais était d'ajouter un listview parent() quand certaines conditions existaient, puis d'ajouter un listview enfant () seulement quand certaines données étaient disponibles.

selon la situation, je pourrais avoir 0 à 5 listes d'enfants.

par exemple:

self.cont.append($("<ul id='addtlInfo' />"));
self.loadMeds(self.cont.attr("id"));
self.loadContacts(self.cont.attr("id"));
self.loadDX(self.cont.attr("id"));
$.mobile.page.prototype.options.addBackBtn = true;

self.cont est simplement une DIV sur la page où j'ajoute mon objets jQuery.

Chacun de la .les méthodes loadXXX ressemblent fondamentalement à ce qui suit:

self.loadMeds = function (client_id) {
    if (!$("#clientMeds").exists()) {
        cw.ds.executeSQL("SELECT * FROM CLIENTS_MEDS WHERE client_id = ?", [client_id], self.appendMeds);
    };
};

self.appendMeds = function (tx, r) {
    var $meds = $("<li>Medications</li>");
    var $medlist = $("<ul />");
    var rs, meds, med = "";
    var m = 0;
    if (r.rows.length > 0) {

        for (var i = 0; i < r.rows.length; i++) {
            rs = r.rows.item(i);
            meds = rs.data.split("\n");

            for (var j = 0; j < meds.length; j++) {
                med = med + meds[j] + "<br />";

                if (m == 2) {
                    $medlist.append($("<li>" + med + "</li>"));
                    med = "";
                    m = -1;
                };
                m++;
            };

        };
    };
    $meds.append($medlist);
    var $m = $("<ul id='clientMeds' />").append($meds);
    $("#addtlInfo").append($("<li />").append($m));
    $("#clientMeds").listview();
};

comme vous pouvez le voir, une fois que j'ai ajouté chaque liste d'enfants, j'appelle la méthode listview (). Il en est résulté une listview des parents avec des listes distinctes pour les enfants.

le problème avait été, si j'avais cliqué sur l'un des éléments dans le listview parent(), je pouvais voir les éléments enfants comme prévu, mais il n'y avait aucun moyen de revenir au listview parent. C'est vraiment devenu un problème quand je testais mon code sur l'iPad ( car il n'y a pas de bouton Back natif. @ le moins sur Droid, Il ya un bouton arrière réelle ).

Quand j'ai essayé de le premier correctif: les données-ajouter-arrière-btn="true", cela n'a pas fonctionné comme prévu.

Le deuxième correctif;

    <script type="text/javascript">
$(document).bind("mobileinit", function() {
      $.mobile.page.prototype.options.addBackBtn = true;
 });    
</script>  

N'a pas semblé à l'élégance pour moi puisque c'était Page large. Je ne cherchais à faire ce réglage que S'il devait y avoir une listview imbriquée et j'ai été agréablement surpris quand ça a fonctionné comme ça. devrait.

0
répondu Sage 2011-10-11 17:51:05