Jquery Mobile 嵌套列表 - 后退按钮不见了？

Posted 2023-03-31

【中文标题】Jquery Mobile 嵌套列表 - 后退按钮不见了？

【英文标题】：Jquery Mobile nested list - Back button gone?

【发布时间】：2011-06-29 14:14:34

【问题描述】：

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

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

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

我目前没有演示 URL，但您可以在演示页面 http://jquerymobile.com/test/docs/lists/lists-nested.html 上查看正在处理的问题

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

感谢您对此问题的任何帮助。

【问题讨论】：

我不相信你现在可以，但我可能错了。如果我不是，您应该提交一份关于此的错误报告 - 看起来这将是一个不错的功能。

想通了。在加载 jquery 移动脚本之前，您可以将其设置为自动将返回按钮添加到所有页面。见jquerymobile.com/blog/2011/06/20/jquery-mobile-beta-1-released

levi - 从我读到的内容看来，这似乎可以在任何地方启用它 - 那么你是否在每一页上都覆盖它？如果你在列表的第一页覆盖它，它会出现在后续的子列表中吗？

你最终使用了什么解决方案？什么效果最好？

在可能的情况下没有任何帮助我在这里找到了我的解决方案***.com/questions/6221527/…

【参考方案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 中偶然发现了&，而且看起来你不能在@987654326 之前使用过滤器@) 如果没有这个额外的过滤，你也会在父页面上获得返回按钮。

【讨论】：

谢谢！这让我发疯了。这是唯一对我有用的解决方案。

如果你引用它，你可以包含&：$(':jqmData(url^="MYPAGEID&ui-page")')

谢谢@slite ！！这对我帮助很大！

【参考方案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"

这将防止后退按钮因页面刷新而混淆并显示它不应该出现的位置。

【讨论】：

这样就好了，但是我在1.0 rtm版本中根本看不到这个属性

希望我能在这里添加一百个向上箭头！看起来最简单的理想解决方案。

【参考方案3】：

从上面发布的示例中得到启发，这就是我能够将“后退”按钮添加到嵌套列表的方法。

我所做的是在某些条件存在时可选地添加父 listview()，然后仅在某些数据可用时添加子 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() 方法。这导致父列表视图具有单独的子列表视图。

问题是，如果我单击父 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>  

对我来说似乎并不优雅，因为它是页面宽的。我希望仅在实际存在嵌套列表视图时才影响此设置，并且当它按预期工作时感到惊喜。