Mobile implementation of navigation bar and footer (with code)

This time I will bring you the implementation of the navigation bar and footer in Mobile (with code). What are the precautions for implementing the navigation bar and footer in Mobile? The following is a practical case, let's take a look.

The 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 p whose data-role is the header.

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

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. (You can imagine that there are not too many buttons in the general mobile app navigation, and they are usually placed in the footer)

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

<p 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> 
</p>

This is in line with the general mobile app

design pattern. At the bottom are buttons for switching 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, p 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 – Headers and footers 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

I believe you have read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use form components in the Mobile framework

What are the differences between jQuery Mobile and Kendo UI?

The above is the detailed content of Mobile implementation of navigation bar and footer (with code). For more information, please follow other related articles on the PHP Chinese website!