JQuery Mobile implements navigation bars and footers

A navigation bar consists of a set of links arranged horizontally, usually inside a header or footer.

By default, links in the navigation bar are automatically converted to buttons (no need for data-role="button").

The code 1 in the navigation bar section is placed in data- div with role as header.

<div data-role="header"> 
<a href="#" data-role="button" data-icon="home"> Home page </a> 
<h1> Welcome to my home page </h1> 
<a href="#" data-role="button" data-icon="search"> search </a> 
</div>

1 basic navigation bar code as above, containing two buttons and 1 line of text for the title. data-icon allows you to define small ICONS for buttons. If you want to place the button on the right side of the text, you can add the class= "ui-btn-right" style. Note that the navigation section in Jquery Mobile (within header) can only contain two buttons. (You can imagine that every app navigation on a mobile phone will not have too much button in it, and most of the navigation will be in the footer.)

In contrast, there is no limit to the number of buttons in the footer, which is located in footer. The basic code is as follows:

<div data-role="footer"> 
<a href="#" data-role="button" data-icon="plus"> Relayed to sina weibo </a> 
<a href="#" data-role="button" data-icon="plus"> Relayed to Tencent Weibo </a> 
<a href="#" data-role="button" data-icon="plus"> Broadcast to QQ space </a> 
</div>

This follows a 1-like mobile app design pattern, with button switching to different pages at the bottom. The way to switch pages is also very simple. Note that each button is defined with the a tag. As we said last time, href can be converted to other pages. The process of jumping has a lot of jquery mobile built-in defined animation effects, described later.

For headers and footers, in addition to the above, you can also define their position attributes using the data-position attribute, with the following three optional values (from: w2cschool) :

Inline - Default. The header and footer are in line with the page content.

Fixed � header and footer will stay at the top of the page and the bottom.

Fullscreen - similar to fixed; The header and footer are left at the top and bottom of the page. but also over thepage content. It is also slightly see-through

jQuery mobile to achieve navigation bar and footer related knowledge to introduce here, I hope to help you!