Список вложенных JQuery Mobile - кнопка "Назад" отсутствует?

Ответ 1

Что-то вроде этого должно помочь:

$(':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>')
  });

Замените MYPAGEID идентификатором страницы, содержащей список.

Событие будет инициировано, если подстраница будет динамически создана и будет вставлять кнопку возврата в качестве первого элемента в заголовке. Затем это будет подобрано и сделано красивым, когда магия jQueryMobile будет запущена автоматически после этого.

Фильтрация немного нечетна, потому что вы не можете ссылаться на ui-page в первом селекторе (он наткнулся на & в data-url, и, похоже, вы не можете использовать фильтр перед .live()) Без этой дополнительной фильтрации вы также получаете кнопку "Назад" на родительской странице.

Ответ 2

Имела ту же проблему, вот решение:

Как только кнопка "Назад" теперь отключена по умолчанию, вам нужно включить ее перед загрузкой jQuery mobile (и после загрузки jQuery):

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

Теперь, когда кнопка jQuery назад сама по себе не работает, вы иногда увидите, что она появляется там, где ее не должно быть. Чтобы предотвратить это, добавьте следующее в свой контейнер страницы:

data-add-back-btn="false"

Это предотвратит запутывание кнопки "Назад" при обновлении страницы и покажет, где это не должно быть.

Ответ 3

Взяв кий из приведенного выше примера, я смог добавить кнопку "Назад" в мои вложенные списки.

То, что я делал, это необязательное добавление родительского списка(), когда существовали определенные условия, а затем добавление дочернего списка() только тогда, когда были доступны определенные данные.

В зависимости от ситуации у меня могло бы быть 0 - 5 дочерних списков.

например:

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 - это просто DIV на странице, где я добавляю объекты jQuery.

Каждый из методов .loadXXX выглядит в основном следующим образом:

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();
};

Как вы можете видеть, после добавления каждого дочернего списка я вызываю метод listview(). Это привело к представлению родительского списка с отдельными списками детей.

Проблема заключалась в том, что если бы я нажал на какой-либо элемент в родительском listview(), я мог бы просматривать дочерние элементы, как ожидалось, но не было возврата к родительскому списку. Это действительно стало проблемой, когда я тестировал свой код на iPad (так как на нем нет встроенной кнопки BACK. @Наименее на Droid, есть реальная кнопка возврата).

Когда я попытался выполнить первое исправление: data-add-back-btn = "true", это не сработало, как ожидалось.

Второе исправление;

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

Мне казалось, что это не элегантно, так как это было широко. Я искал эффект только для этого параметра, если бы на самом деле был вложенный список, и был приятно удивлен, когда он работал так, как ожидалось.