JQuery Mobile implements navigation bar and footer _jquery

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

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

The code for the navigation bar section is generally placed inside the div with the header data-role.

<div data-role= "header" > 
<a href= "#" data-role= "button" data-icon= "Home" > Homepage </a> 
 
 

A basic navigation bar code includes two buttons and one line of text as the caption. Data-icon can define a small icon corresponding to a button. If you want the button to be placed to the right of the text, you can add the class= "Ui-btn-right" style. Note that the navigation section (within the header) of the Jquery Mobile can only contain two buttons. (Can imagine, the general mobile phone app navigation will not have too many button, generally put in the footer)

In contrast, there is no limit to the number of buttons in the footer, the footer is placed in footer, and the basic code is as follows:

<div data-role= "Footer" > 
<a href= "#" data-role= "button" data-icon= "Plus" > Broadcast to Sina Weibo </a> 
<a href= "#" data-role= "button" data-icon= "Plus" > Broadcast to Tencent Weibo </a> 
<a href= "#" data-role= "button" data-icon= "Plus" > Broadcast to QQ space </a> 
</div>

This conforms to the General mobile app design pattern, and the bottom is a button that switches to a different page. The way to switch pages is also very simple, notice that every button here is defined with a tag, where the href, as we said last time, can be converted to a page, as long as you add the ID of another page after href (that is, Data-role is the page div) to complete the jump. The jump process has a lot of jquery mobile built-in definition of animation effects, described later.

For headers and footers, in addition to the above, you can also use the Data-position property to define their location properties, which contain the following three optional values (from: W2cschool):

Inline-Default. Headers and footers are in line with page content.

fixed– headers and footers will be left at the top and bottom of the page.

Fullscreen-similar to fixed; headers and footers stay at the top and bottom of the page, but also over thepage content. It is also slightly see-through

About jquery Mobile implementation of the navigation bar and footer related knowledge to introduce you here, I hope to help you!