Navbar for all pages in a multipage HTML5 web app using a jQuery Mobile on client side

问题

I am using jQuery Mobile to create a WebApp.

And I have a page like this :

<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>

Live demo is at http://jsfiddle.net/FB9KJ/

It's working ok, but I don't want to repeat <div data-role="navbar"> for each page.

Are there a way to use the same navbar on all jQuery Mobile pages?

回答1:

Not unless you are willing to use includes in a jsp... you will have to settle for one page per jsp though.

OR

use ANT Replace to replace @HEADER@ tokens in your file with HTML Markup at compile time.

来源：https://stackoverflow.com/questions/10919445/navbar-for-all-pages-in-a-multipage-html5-web-app-using-a-jquery-mobile-on-clien