JQuery Mobile navigation bar code _jquery

A navigation bar consists of a set of horizontally arranged links, usually included in the head or tail.

By default, the links in the navigation bar automatically become buttons (no data-role= "button" is required).

Use the data-role= "NavBar" property to define the navigation bar:

Copy Code code as follows:

<div data-role= "Header" >
<div data-role= "NavBar" >
<ul>
<li><a href= "#anylink" >Home</a></li>
<li><a href= "#anylink" >page two</a></li>
<li><a href= "#anylink" >Search</a></li>
</ul>
</div>
</div>

By default, the width of the button is the same as its content. Use an unordered table to divide the width of a button evenly: one button is 100% wide, 2 buttons each occupy 50% width, 3 buttons per 33,3% width, and so on. However, if you specify more than 5 buttons in the navigation bar, it will be split into multiple rows (see more instances).

Activate button
When a link in the navigation bar is clicked, it gets the look that is selected (pressed).

If you want to get this look without remembering the link, use class= "ui-btn-active":

<li><a href= "#anylink" class= "ui-btn-active" >Home</a></li>

For multiple pages, you might want the selected appearance of each button to represent the page that the current user is on. To do this, add "ui-state-persist" and "ui-btn-active" to the linked class:

<li><a href= "#anylink" class= "ui-btn-active ui-state-persist" >Home</a></li>