What's the best way to create a menu in jQueryMobile

问题

I'm developing an application that contains a menu with links to the several pages and I would like to know what's the best way to implement it.

One solution is to create the menu on all pages via JavaScript, but it would duplicate menus when it should have just one global to all pages.

Another solution would be to create a div outside the framework but this way would not be taking any advantage of the features of the framework.

回答1:

At the present version of jQueryMobile 1.0a4.1 the only solution I found was creating a div outside the jQueryMobile page structure.

HTML:

<div id="global-header">Header</div> 

<div data-role="page">
    ...
</div>  

CSS:

#global-header {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 40px;
    width: 100%;
    z-index:99999;
}

.ui-page {
    padding-top: 40px;
}

回答2:

I prepared this post specifically for this question, It deals less with fixed headers and footers (since I generally believe them to be misguided wastes of already limited real estate) and more about dealing with global navigation in general. Hope this helps.

回答3:

Check the plugin I'm writing, called multiview.

It's still work in progess, but you can set a global header/footer by placing it inside the wrapper page, but outside any panels you are using.

Let me know if this would fit your need. I'm slowly progressing towards bug-fixing stage.

来源：https://stackoverflow.com/questions/5664770/whats-the-best-way-to-create-a-menu-in-jquerymobile