Question

在jQuery Mobile的最新版本中，添加后退按钮的方法是在整个“页面”div中添加“data-add-back-btn =”true“'。

这很有效。但是，查看嵌套列表子菜单时，后退按钮不再存在。

通过查看输出代码，似乎发生了什么，jquery mobile隐藏了原始的“page”div，并创建了一个新的（没有将后退按钮属性设置为true）。

我目前没有演示网址，但您可以在演示页http://jquerymobile.com/test/docs/lists/lists-nested.html

中看到问题。

我的问题是，我是否需要添加一些东西，它会告诉它为嵌套菜单添加一个后退按钮？如果没有，是否有某种方法可以自动将后退按钮属性添加到所有“页面”div？

感谢任何有关此问题的帮助。

Answer 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替换为包含该列表的页面的ID。

动态创建子页面时将触发事件，并将后退按钮作为标题中的第一项插入。然后，当jQueryMobile魔术随后自动运行时，它将被拾取并变得很好。

过滤有点奇怪，因为您无法在第一个选择器中引用ui-page（它偶然发现&中的data-url并且看起来您无法使用.live()之前的过滤器如果没有这个额外的过滤，你也可以在父页面上获得后退按钮。

Answer 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"

这样可以防止后退按钮被页面刷新弄糊涂并显示它不应该出现的位置。

Answer 3

从上面发布的示例中得到一个提示，这就是我能够将Back按钮添加到嵌套列表的方式。

我正在做的事情是，当存在某些条件时，可选择添加父列表视图（），然后仅在某些数据可用时才添加子列表视图（）。

根据具体情况，我可以有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只是我附加jQuery对象的页面上的DIV。

每个.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>

因为它是页面广泛的，所以对我来说似乎很优雅。我希望只影响这个设置，如果实际上是一个嵌套的列表视图，当它按预期工作时会感到惊喜。

Jquery Mobile嵌套列表 - 后退按钮消失了？

3 个答案: