JQuery移动菜单静态页面更改

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

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

但我认为至少有两个解决方案:

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