Question

我正在创建一个jquery移动网站。我正在使用最新版本的jQ mobile。我在顶部栏上有一个按钮，可以打开菜单。该按钮仅在主页上提供。在其他页面上，后退按钮取代了它的位置。菜单div位于页面div下（想想Facebook iphone应用程序）。

当我转换到没有大量内容的页面时，菜单显示在新页面的div下面。我浏览了jQ移动文档，发现了几个似乎符合要求的事件。在主页上我添加了这个JavaScript：

 <script type="text/javascript">
  $(document).on("pagebeforeshow", function(){
    $('#menu').show();
  });
  $(document).on("pagebeforehide", function() {
    $('#menu').hide();
  });
</script>

我原以为beforepagehide会在转换之前触发并隐藏菜单div，pagebeforeshow会再次显示它。这不起作用。我选择了错误的事件吗？我是否完全忽略了jQ mobile如何运作？

编辑：我尝试修改代码，如下所示：

<script type="text/javascript">
    $(document).on("pageinit", function(){
      $('div[data-role="page"]').one("pagebeforeshow", function(event, ui){
          alert("show");
          $('#menu').show();
      });
      $('div[data-role="page"]').one("pagebeforehide", function(event, ui) {
          alert("hide");
          $('#menu').hide();
      });
   });
</script>

我希望上面的代码在每次显示页面时绑定事件一次执行。我得到的是“隐藏”警报两次，然后在我转换到显示页面之前的“显示”警报。我有一种感觉，我在jQuery移动生命周期中遗漏了一些东西。

Answer 1

解决方案

我为您做了一个工作示例： jsFiddle

与您的示例不同，我创建了一个简单的div，每次在页面转换期间显示。您可以通过删除JavaScript代码来测试它。

这是隐藏/显示自定义div的js代码：

$(document).on('pagebeforehide','[data-role="page"]',function(e,data){    
    $('#test-div').hide();  
});

$(document).on('pageshow','[data-role="page"]',function(e,data){    
    $('#test-div').show();  
});

pagebeforehide 之前还有3个事件。我们无法使用它们，因为它们只会在页面加载到DOM之前触发一次。每次触发的第一个事件是 pagebeforehide ，每次触发的最后一个事件是 pageshow 。

还有一个与此问题无关的问题，此语法不起作用：

$(document).on("pageinit", function(){
  $('div[data-role="page"]').one("pagebeforeshow", function(event, ui){
      alert("show");
      $('#menu').show();
  });
  $('div[data-role="page"]').one("pagebeforehide", function(event, ui) {
      alert("hide");
      $('#menu').hide();
  });
});

页面事件无法像这样序列化。页面事件不能是其他页面事件的子项。

jquery移动转换事件问题

1 个答案:

解决方案

更多信息