Easy Html5-jquery Mobile Toolbars (Header and Footer)

jquery's storm on the Web JS framework continues to move to mobile, and what does jquery mobile include?

Brief introduction
Toolbars are toolbars in the head, tail, or content of mobile websites and apps, and Jquery Mobile provides a set of standard tools and navigation bar tools that can be used directly in most cases, such as the header of a website or application, the navigation of functions, etc., which are usually text or buttons. The tail is the bottom of a page, the content can be based on the specific application needs to layout, can also put functional navigation, a variety of links, etc. the content is generally used as a function of the display, the content is accompanied by the function; jquery Mobile also provides some of the features of these toolbars-toolbar positioning , by setting the toolbar positioning, you can keep the toolbar in the head or bottom, and when scrolling, if the toolbar is scrolled out of the screen, jquery Mobile automatically animates the toolbar back to the head or bottom, and at any time when you click on the positioned toolbar, Clicking on the screen will make the toolbar disappear, re-display when clicked, and, of course, support full-screen positioning mode, and when the toolbar is scrolled out of the screen, the scroll bar will not appear immediately, but when the screen is clicked, the sidebar will automatically appear in a fixed position.

Header
1. Page header is a data-role header div, of course, we can define any other content in this div, such as the usual back button, etc.;

<div data-role= "header" Data-theme= "C" >            

2. generally add the button in the header not too much, add the buttons in the header with automatic positioning function;

For example, when adding a button:

<div data-role= "header" Data-theme= "C"  data-position= "fixed" >                       <div data-role= "header" Data-theme= "C"  data-position= "fixed" >                       <div data-role= "header" Data-theme= "C"  data-position= "fixed" >                       <div data-role= "header" Data-theme= "C"  data-position= "fixed" >                       
This is simple, just add data-position= "fixed" to the header and footer.
<div id= "mainPage" data-role= "page" data-add-back-btn= "true" > <div data-role= "header" data-theme= "C" dat a-position= "fixed" > 
Footer
1.footer, like the header, is also a div container with data-role=footer, with the same Data-position property as the header;
2. The difference is that footer will not have the header that the inside button will have automatic positioning function, footer content will be in accordance with the specific CSS style to display the content;
3. Of course we can add a variety of custom features to the footer (because it's just a div:)) ；
4. In some cases we will also need a trailing bar for the global navigation element, I hope the page switch when the tail bar is also fixed and display, create a continuous trailing bar can do this, add the Data-id property to the trailing bar, and set the same Data-id value in the trailing bar of all associated pages, Can make the tail bar in the page switch also fixed and display;
Easy Html5-jquery Mobile Toolbars (Header and Footer)