页面上的JQuery Mobile Menu静态更改

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>

有没有办法不让menù代码重新出现在每个页面上？ 我希望我的菜单div对所有页面都是集体的。

有什么想法吗？

谢谢， 安德烈

Answer 1

不，＆＃34;页面的概念＆＃34;不允许在它们之间共享静态内容。

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

• 只使用一个包含您的菜单的页面，并使用许多隐藏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");
  });