javascript - JQuery Mobile 菜单静态页面更改

Question

我正在尝试修复页面更改时的顶部菜单。示例:

<div data-role="page" id="page1">
    //page 1 contents
</div>
<div data-role="page" id="page2">
    //page 2 contents
</div>

和我的顶部菜单

<div id="top-menu">
</div>

有什么办法可以让菜单代码不再出现在每一页上吗？我希望我的菜单 div 集中在所有页面上。

有什么想法吗？

谢谢，安德里亚

Answer 1

不，“页面”的概念不允许在它们之间共享静态内容。

但我至少看到两个解决方案:

• 仅使用包含菜单的一页，以及许多隐藏菜单 div封装您的内容(例如 <div data-role="content" id="page1" class="hidden"> )。使用菜单导航，您只需显示/隐藏您需要的内容

• 使用一些 JavaScript 技巧:

  $(document).on("pagebeforeshow", "[id^=page]", function(event)
  {
      // "move" the menu to the content of the current page
      // (you have to add IDs to each page like 'page1content')
      $("#top-menu").prependTo("#" + this.id + "content");
  });