ToolBars (Header and Footer) of easy Html5-Jquery Mobile)

The storm of jquery in the web js framework continues, but it is moving towards mobile with mobile terminals. So what exactly does jquery mobile include?
Introduction
The toolbar is a tool bar in the head, tail, or content of a Mobile website or application. Jquery Mobile provides a set of standard tools and navigation bar tools that can be directly used in most cases; the header is generally used as the title and function navigation of a website or application. Generally, it is a text or button. The tail is the bottom of a page and the content can be typeset based on the specific application requirements, you can also set function navigation and various links. The content is generally used as a function display, and the display content is accompanied by a function; jquery mobile also provides some features of these toolbar, that is, tool bar positioning. By setting tool bar positioning, you can keep the tool bar in the header or bottom. When scrolling, if the tool bar is rolled out of the screen, jquery mobile will automatically overdisplay the toolbar to the header or bottom of the toolbar. When you click the toolbar to be located, clicking the screen will make the toolbar disappear, when you click it again, it will be re-displayed. Of course, the full-screen positioning mode is also supported. When the toolbar is rolled out of the screen, the scroll bar will not be displayed immediately, but when you click the screen, the toolbar is automatically displayed at a fixed position.
 
Header
1. The page Header is a div with data-role as the header. Of course, we can define any other content in this div, such as the commonly used back button;
<Div data-role = "header" data-theme = "c">
<H1> Page Header </Div> <! --/Header -->
 
2. Generally, do not add too many buttons in the header. The buttons added in the header have the automatic positioning function;
For example, when a button is added:
 
<Div data-role = "header" data-theme = "c" data-position = "fixed">

<H1> Page Header <! -- <A href = "../index.htm" data-icon = "back"> back </a> -->
<A href = "../index.htm" data-icon = "check"> Save </a>

<! -- <A href = "../index.htm" class = "ui-btn-left" data-icon = "back"> back1 </a>
<A href = "../index.htm" data-icon = "check"> Save1 </a> -->
</Div> <! --/Header -->
 

 
When two buttons are added:
 
<Div data-role = "header" data-theme = "c" data-position = "fixed">

<H1> Page Header <A href = "../index.htm" data-icon = "back"> back </a>
<A href = "../index.htm" data-icon = "check"> Save </a>

<! -- <A href = "../index.htm" class = "ui-btn-left" data-icon = "back"> back1 </a>
<A href = "../index.htm" data-icon = "check"> Save1 </a> -->
</Div> <! --/Header -->
 

 
For more buttons:
 
<Div data-role = "header" data-theme = "c" data-position = "fixed">

<H1> Page Header <A href = "../index.htm" data-icon = "back"> back </a>
<A href = "../index.htm" data-icon = "check"> Save </a>

<A href = "../index.htm" class = "ui-btn-left" data-icon = "back"> back1 </a>
<A href = "../index.htm" data-icon = "check"> Save1 </a>
</Div> <! --/Header -->
 

 
The automatic positioning function automatically adds the ui-btn-left style to the button when there is a button in the header content, when there are two, the ui-btn-left style will be added to the first one, and the ui-btn-right style will be automatically added to the second one, the third to nth application ui-btn style;
Of course, you can set the button position by yourself:
 
<Div data-role = "header" data-theme = "c" data-position = "fixed">

<H1> Page Header <! -- <A href = "../index.htm" data-icon = "back"> back </a> -->
<A href = "../index.htm" class = "ui-btn-right" data-icon = "check"> Save </a>

<! -- <A href = "../index.htm" class = "ui-btn-left" data-icon = "back"> back1 </a>
<A href = "../index.htm" data-icon = "check"> Save1 </a> -->
</Div> <! --/Header -->
 
 

 
Of course, after all, the header is just a div, and of course we can put any content in this div, as long as you want;
 
3. Fixed the header position;
When we make an app, the page displays more content. Of course, the scroll bar is preferred, but everyone will know that we only add the scroll bar on the central content. What about our web site or application; we also want to keep the head and feet unchanged when scrolling the content. This jquery mobile is set through the data-position of the header or footer. The default data-position is inline, that is, if you do not set the data-position attribute or set data-posiiton = "inline", the page header and footer will scroll to the scroll bar of the followers page. When you set data-posiiton to fixed, the head and foot will be suspended. When the content is rolled, the head and foot will also scroll, but the position will always be at the top and bottom;

 

 
This is simple. You only need to add data-position = "fixed" to the header and footer.
View Code
 
<Div id = "mainPage" data-role = "page" data-add-back-btn = "true">

<Div data-role = "header" data-theme = "c" data-position = "fixed">

<H1> Page Header <A href = "../index.htm" data-icon = "back"> back </a>
<A href = "../index.htm" class = "ui-btn-right" data-icon = "check"> Save </a>

<! -- <A href = "../index.htm" class = "ui-btn-left" data-icon = "back"> back1 </a>
<A href = "../index.htm" data-icon = "check"> Save1 </a> -->
</Div> <! --/Header -->

<Div data-role = "content">
<H3> About us In browsers that support CSS position: fixed (most desktop browsers, iOS5 +, Android 2.2 +, BlackBerry 6, and others ), toolbars that use the "fixedtoolbar" plugin will be fixed to the top or bottom of the viewport, while the page content scrolls freely in. in browsers that don't support fixed positioning, the toolbars will remain positioned in flow, at the top or bottom of the page.

To enable this behavior on a header or footer, add the data-position = "fixed" attribute to a jQuery Mobile header or footer element.

Fullscreen fixed toolbars sit on top of the content at all times when they are visible, and unlike regular fixed toolbars, fullscreen toolbars do not fall back to static positioning when toggled. instead they disappear from the screen entirely. fullscreen toolbars are ideal for more immersive interfaces, like a photo viewer that is meant to fill the entire screen with the photo itself and no distractions.

To enable this option on a fixed header or footer, add the data-fullscreen attribute to the element.

</Div> <! --/Content -->

<Div data-role = "footer" data-position = "fixed">

<H4> Page Fotter
</Div> <! --/Footer -->
</Div> <! --/Page -->
 
 
Footer
1. Like footer and header, footer is also a div container with data-role = footer; it has the same data-position attribute as header; I will not talk about it here;
2. The difference is that the buttons in footer's header are not automatically positioned; The content in footer is displayed according to the specific css style;
3. Of course, we can add various custom functions in footer (because it is just a div :));
4. in some cases, we also need a global navigation element as the tail bar. We hope that the tail bar will be fixed and displayed when the page is switched. This can be done by creating a continuous tail bar; add the data-id attribute to the end column, and set the same data-id value in the end column of all associated pages, the tail column is fixed and displayed during page switching;
 
Instance code: http://www.bkjia.com/uploadfile/2012/0510/20120510093058590.zip



Author J Mo