jQuery Mobile - Toolbar Widget

The jQuery mobile toolbar widget allows you to create headers and footers. The below table lists different types of toolbars −

Sr.No. Toolbar type & Description
1 Toolbar

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

2 Dynamic toolbars

You can inject toolbars dynamically on click of a button.

3 External toolbars

The header and footer will be placed outside the page. These toolbars are positioned before and after the page inside the body and they will remain in dom unless removed manually.

4 Fixed toolbars

To set the toolbars position fixed, add the data-position = "fixed" attribute to the header or footer.

5 Fullscreen position

To set the toolbars to fullscreen fixed position which overlays it over the content, add data-fullscreen = "true" attribute to a fixed header.

6 Fixed external toolbars

The header and footer can be made external by placing them outside the page and the toolbars position can also be made as fixed position.

7 Persistent toolbars

These pages are example of a persistent navbar in a fixed footer toolbar, you will see the page content transition while the header and footer on these pages remain in place.

8 Ajax optimized toolbars

The Ajax optimized persistant toolbars pages are optimized on server side to check whether the request is from an Ajax.

9 Form in toolbar

The form can be used in toolbars, it can be placed in headers and footers by using your normal <form>.

Kickstart Your Career

Get certified by completing the course

Get Started