在客户端使用 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 标记。