html - 在客户端使用 jQuery Mobile 的多页 HTML5 Web 应用程序中所有页面的导航栏

Question

我正在使用 jQuery Mobile 创建一个 WebApp。

我有一个这样的页面：

<div data-role="page" id="page1">
    <div data-role="header">
        <p>
            Page 1
        </p>
        <div data-role="navbar">
            <ul>
                <li><a href="#page1">To first</a></li>
                <li><a href="#page2">To second</a></li>
            </ul>
        </div>
     </div>     
</div>
 <div data-role="page" id="page2">
    <div data-role="header">
        <p>
            Page 2
        </p>
        <div data-role="navbar">
            <ul>
                <li><a href="#page1">To first</a></li>
                <li><a href="#page2">To second</a></li>
            </ul>
        </div>
     </div>
</div>

现场演示位于http://jsfiddle.net/FB9KJ/

它工作正常，但我不想<div data-role="navbar">为每一页重复。

有没有办法在所有 jQuery Mobile 页面上使用相同的导航栏？

Answer 1

除非您愿意在 jsp 中使用包含，否则您将不得不满足于每个 jsp 一页。

或者

在编译时使用 ANT Replace 将文件中的 @HEADER@ 标记替换为 HTML 标记。