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

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"

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