jQuery Mobile : Footer and Toolbar
Learn how to use jQuery Mobile to create Navigation using Footer , Toolbar and Tabbars
jQuery Mobile: Footer
jQuery Mobile can be used to create a footer, which is similar to header with some minor differences, but a footer is more flexible while adding buttons
A footer is added by setting the attribute data-role="footer" , the footer is fixed by setting the attribute data-position="fixed"
Example: jQuery Mobile - Default Footer StructureGive it a TRY! » Note: All footers are styled identically by default to suit the display
jQuery Mobile: Fixed Footers
jQuery Mobile places a footer after the content section, but if the content extends beyond the height of the viewport footer is not visible until you scroll to the end of the content.
However, you can fix the footer to ensure it always remains positioned and visible at the bottom edge of screen. To create a fixed footer set attribute data-position="fixed". You can even add icon buttons.
Syntax: jQuery Mobile Fixed FooterGive it a TRY! » Note:Fullscreen mode is useful when displaying photos and videos.
jQuery Mobile: ToolBars with Icons
jQuery Mobile can be used to create toolbars , the advantage of toolbars is that it occupies less screen area and with use of icons can express clear meaning.
Creating is toolbar is easy and takes less markup, we need an unordered list of buttons wrapped within a parent div element with the attribute data-role="navbar"
Syntax: jQuery Mobile Buttons with Icons OnlyGive it a TRY! » Note: The width of toolbar is flexible and is evenly spaced according to the width of the device.
jQuery Mobile: Toolbar with Segmented Control
jQuery Mobile can also be used to create a segmented control in a toolbar, thus allowing the used to access different links within application.
A segmented control is a simple button group wrapped within a button group and styled according to needs.
Syntax: jQuery Mobile Toolbar with Segmented ControlGive it a TRY! » Note: Segmented control can be resused within both the header and footer.
jQuery Mobile: Tab Bars with Icons
jQuery Mobile provides methods to style the footer as a tab bar as well, it allows you to navigate between the different views of the application.
Typically, tab bar contains icons and text for easy understanding, if you use these standard tab bar to extra styling in needed.