1

我正在创建一个 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 移动生命周期中遗漏了一些东西。

4

1 回答 1

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();
  });
});

页面事件不能像那样序列化。页面事件不能是另一个页面事件的子事件。

更多信息

如果您想了解更多关于此以及页面事件如何工作的信息，请在我的个人博客中浏览文章。

于 2013-01-26T10:14:04.250 回答