As HTML5 applications may either hide the mobile browser controls or navigate via JavaScript manipulation of the DOM, a different mechanism of navigating between pages must be used. jQuery Mobile provides a navbar widget that may be placed in the header, footer, or body of a page. This widget contains buttons to support navigation to other pages, and may be up to five buttons wide, after which it will wrap onto the next line.
In this recipe we will create mobile Visualforce pages for the Home and About elements of an application with a common navigation bar in the footer of the page. In order to avoid repetition of common content, we will use a template to generate the header and footer information, allowing each page to inject its content into appropriate areas of the page. The navigation bar will highlight the button for the current page. Finally, we will provide an additional button in the navigation bar to open a Facebook-style panel.
