Search within TutorialsPark

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 Structure

Give 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 Footer

Give 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 Only

Give 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 Control

Give 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.

Syntax: jQuery Mobile Tab Bars with Icons

Give it a TRY! » Note: If you enable back button globally, you can disable on specific pages by setting data-add-back-btn="false"