如何使用jQuery mobile设置页面和导航栏模板？

Question

我不明白。好像<div data-role="page">...</div> div应该包含该页面上的所有内容。但是我需要在每个页面div中反复编写导航标签菜单：

<div data-role="page" id="page1">

    <div data-role="navbar">
        <ul>
          <li><a href="#page1" class="ui-btn-active">One</a></li>
          <li><a href="#page2">Two</a></li>
          <li><a href="#page3">Three</a></li>
        </ul>
      </div>

      <div role="main">

        <h1>One</h1>

      </div>

</div>

<div data-role="page" id="page2">

    <div data-role="navbar">
        <ul>
          <li><a href="#page1">One</a></li>
          <li><a href="#page2" class="ui-btn-active">Two</a></li>
          <li><a href="#page3">Three</a></li>
        </ul>
      </div>

      <div role="main">

        <h1>Two</h1>

      </div>

</div>

<div data-role="page" id="page3">

    <div data-role="navbar">
        <ul>
          <li><a href="#page1">One</a></li>
          <li><a href="#page2">Two</a></li>
          <li><a href="#page3" class="ui-btn-active">Three</a></li>
        </ul>
      </div>

      <div role="main">

        <h1>Three</h1>

      </div>

</div>

我无法在页面之外编写导航栏，因为它当时不会出现。

我无法找到将导航栏放在单独文件中并将其包含在内的任何方法。这是怎么回事？我是否需要多次编码相同的导航栏，或者是否有其他解决方案呢？

Answer 1

更改它应该有效的id值（id="page1", id="page2", id="page3"。