JQuery Mobile implements navigation bar and footer_jquery

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

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

The code for the navigation bar is generally placed within a div whose data-role is the header.

<div data-role="header"> 
<a href="#" data-role="button" data-icon="home">首页</a> 
<h1>欢迎访问我的主页</h1> 
<a href="#" data-role="button" data-icon="search">搜索</a> 
</div>

A basic navigation bar code is as above, including two buttons and a line of text as the title. data-icon can define the small icon corresponding to the button. If you want the button to be placed to the right of the text, you can add the class="ui-btn-right" style. It should be noted that the navigation section (inside the header) in Jquery Mobile can only contain two buttons. (As you can imagine, general mobile app navigation does not have too many buttons, and they are usually placed in the footer)

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

<div data-role="footer"> 
<a href="#" data-role="button" data-icon="plus">转播到新浪微博</a> 
<a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a> 
<a href="#" data-role="button" data-icon="plus">转播到QQ空间</a> 
</div>

This is in line with the general mobile app design pattern. At the bottom are buttons to switch to different pages. The way to switch pages is also very simple. Notice that each button here is defined with an a tag. The href in it is as we said last time. Page conversion can be performed. Just add another page after the href. id (that is, the div whose data-role is page) can complete the jump. The jump process has many animation effects built into jquery mobile, which will be introduced later.

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

Inline - Default. Headers and footers are inline with the page content.

Fixed – Header and footer will remain at the top and bottom of the page.

Fullscreen - Similar to fixed; the header and footer will remain at the top and bottom of the page, but also over the page content. It is also slightly see-through

This is where I will introduce you to the relevant knowledge about jQuery mobile’s implementation of navigation bar and footer. I hope it will be helpful to you!