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

I don't understand. It seems like the <div data-role="page">...</div> divs should contain everything on that page. But then I need to write the navigation tabs menu again and again in every page div:

我不明白。似乎

... divs应包含该页面上的所有内容。但是我需要在每个页面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>

And I can't write the navbar outside the pages since it won't shown up then.

而且我不能在页面之外写出导航栏，因为它不会出现在页面之外。

And I can't find any way to have the navbar in a separate file and include it. How is it meant to be? Do I have to code the same navbar several times or is there another solution to this?

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

1 个解决方案

#1

change your id value ( id="page1", id="page2", id="page3" ) it should work.

改变你的id值（id =“page1”，id =“page2”，id =“page3”）它应该有效。