jQuery Mobile - Toolbar

To enhance both headers and footers you can use toolbar widget.

Following table lists different types of toolbar used in jQuery Mobile −

Sr.No. Toolbar Type & Description
1 Markup

It contains toolbars like header that appears at the top and footer that appears at bottom of the page.

2 Theme

The theme swatch will be inherited by the header and footer toolbar from the page by default; however you can set the color of the theme swatch easily.

3 Buttons in toolbars

Buttons can be positioned on toolbars using ui-btn-left and ui-btn-right classes.

4 Adding back button to header

jQuery mobile framework generates a back button on a header when the header has a data-add-back-btn = "true" attribute.

5 Navbars

You can use navigation bars inside the header and footer toolbars.

6 Grouped buttons

You can use data-role = "controlgroup" and data-type = "horizontal" attributes to group buttons into a set of button and wrap the links within an element.

7 Adding padding

The toolbars will not have any padding for navbars and other widgets. To add padding, you can wrap content of the toolbars inside an element and add ui-bar class to the element.

Kickstart Your Career

Get certified by completing the course

Get Started