JQuery Mobile navigation bar code

A navigation bar consists of a group of Horizontally arranged links, which are usually included in the header or tail.

By default, links in the navigation bar are automatically converted to buttons (data-role = "button" is not required ").

Use the data-role = "navbar" attribute to define the navigation bar:
Copy codeThe Code is 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 button width is the same as its content. Use an unordered list to evenly divide the width of a button: one button occupies 100% of the width, two buttons each occupy 50% of the width, and three buttons each occupy of the width, and so on. However, if you specify more than five buttons in the navigation bar, multiple rows are split (View "more instances ").

Activation button
When a link in the navigation bar is clicked, it will get the appearance of the selected (pressed.

If you want to get this appearance without worrying about the link, use class = "ui-btn-active ":

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

For multiple pages, you may want the selected appearance of each button to represent the page of the current user. 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>