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 开发者_Go百科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.

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

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.

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.