JQuery Mobile navigation bar and layout

Navigation bar
1. Use the data-role= "NavBar" property to define the navigation bar, with a maximum of 5 buttons in the navigation bar, or line wrapping.

<div data-role= "header" >
        <!--five buttons, the default is equally divided. If there is an icon by default above the text--
        <div data-role= "NavBar" >
            <ul>
                <li><a href= "#" data-icon= "Home" > Home </a></li>
                <li><a href= "#" data-icon= "Search" > Search </a></li>
                <li><a href= "#" data-icon= "Back" > Return </a></ li>
                <li><a href= "#" data-icon= "Home" > Home </a></li>
                <li><a href= "#" data-icon= "Search" > Search </a></li>
            </ul>
        </div>
    </div>

Five buttons as shown:

If more than five, the following figure:

2. Set the title bar in the header, the header usually contains the header header/logo or one to two buttons, if there is only one button, the default is displayed on the left, unless you add a style: class= "Ui-btn-right"

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

If there is only one search button, it will run to the left.

<div data-role= "header" >
      
 

When you add class= "Ui-btn-right" in <a href= "#" data-role= "button" > Search </a>, the search is on the right.

3. Footer Toolbar (Set the class name "Ui-btn" in the footer)

<div data-role= "Footer" class= "ui-btn" >
    <a href= "#" data-role= "button" > retransmission to Sina Weibo </a>
    <a href= "#" data-role= "button" > Retransmission to Tencent Weibo </a>
</div>
 

4. Locating the header footer
(1) inline (default): Header and footer with page content in line
(2) Fixed: Click Hide Footer
(3) Fullscreen: Click Hide Header and Footer
Use the Data-position property to locate headers and footers:

Inline Positioning (default)

<div data-role= "header" data-position= "inline" ></div>
<div data-role= "Footer" data-position= " Inline "></div>
 
Fixed positioning

<div data-role= "header" data-position= "fixed" ></div>
<div data-role= "Footer" data-position= " Fixed "></div>
 
fullscreen positioning
If you need to enable full targeting, use data-position= "fixed" and add the Data-fullscreen attribute to the element:

<div data-role= "header" data-position= "fixed" data-fullscreen= "true" ></div>
<div data-role= " Footer "data-position=" fixed "data-fullscreen=" true "></div>
 
Layout
The flow layout is generally used, that is, the width is expressed as a percentage.

 Streaming-based layout grid 
 JQuery Mobile provides a set of CSS-based column layout schemes. However, it is generally not recommended to use column layouts on mobile devices, due to the screen width of the mobile device. But sometimes you need to locate smaller elements, such as buttons or navigation bars, just as you would in a table. At this point, the column layout is appropriate. The columns in the grid are equal width (total width is 100%), borderless, background, margin, or padding. There are four types of layout grids available: 
 

<div class= "Ui-grid-b" > <!--first row has three buttons--<div class= "Ui-b Lock-a "><a href=" # "data-role=" button "data-icon=" Home > Home </a></div> <div class= "Ui-bl Ock-b "><a href=" # "data-role=" button "data-icon=" Search > Search </a></div> <div class= "Ui-b Lock-c "><a href=" # "data-role=" button "data-icon=" Back "> Return </a></div> <!--the second row has two buttons--&
            Gt <div class= "ui-block-a" ><a href= "#" data-role= "button" data-icon= "Home" > Home </a></div> &
            Lt;div class= "Ui-block-b" ><a href= "#" data-role= "button" data-icon= "search" > Search </a></div> <!--The third row has a button--<div class= "ui-block-a" ><a href= "#" data-role= "button" data-icon= "Back" > Return </a></div> </div> 
 
 
 The above code sets the grid to Ui-grid-b, then divides the Web page into three parts, and if you change the grid, it can also be called a different style, as shown below, if the grid is set to Ui-grid-c