Вложенный список Jquery Mobile - кнопка «Назад» исчезла? - PullRequest
Новая
       3

Вложенный список Jquery Mobile - кнопка «Назад» исчезла?

18 голосов
/ 29 июня 2011

В последней сборке jQuery Mobile можно добавить кнопку возврата, добавив «data-add-back-btn =" true "" к вашей общей странице "div".

Это работаетотличный.Однако при просмотре вложенного списка подменю кнопка «Назад» больше не отображается.

Глядя на выходной код, кажется, что происходит то, что jquery mobile скрывает ваш оригинальный div "page" и создает новый (без атрибута кнопки назад, установленного в true).

У меня нет демонстрационного URL в настоящее время, но вы можете увидеть проблему в действии на демонстрационной странице http://jquerymobile.com/test/docs/lists/lists-nested.html

У меня вопрос, есть ли что-то, что я должен добавить, который скажет об этомдобавить кнопку возврата для вложенных меню?и если нет, есть ли какой-нибудь способ, которым я могу взломать его, чтобы автоматически добавить атрибут back-button ко всем div'ам "page"?

Цените любую помощь по этому вопросу.

Ответы [ 3 ]

15 голосов
/ 06 июля 2011

Как-то так должно помочь: 

$(':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()) Без этой дополнительной фильтрации вы также получаете кнопку возврата на родительской странице.

12 голосов
/ 16 сентября 2011

Была такая же проблема, вот решение:

Поскольку кнопка «Назад» теперь по умолчанию отключена, ее необходимо включить перед загрузкой jQuery mobile (и после загрузки jQuery): 

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

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

data-add-back-btn="false"

Это предотвратит замешательство кнопки «Назад» при обновлении страницы и показе того, где ее не должно быть.

0 голосов
/ 11 октября 2011

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

Что я делал, это добавлял родительский listview () при определенных условияхзатем добавление дочерних списков () только при наличии определенных данных.

В зависимости от ситуации у меня может быть от 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 ().Это привело к появлению родительского списка с отдельными дочерними списками.

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

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

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

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

Не показалось мне элегантным, поскольку оно было шириной страницы.Я пытался повлиять только на эту настройку, ЕСЛИ там действительно будет вложенный список, и был приятно удивлен, когда он просто работал как ожидалось.

...