External fixed toolbars - jQuery Mobile Demos

Back

# External fixed header

# Fixed external toolbars

The header and footer on this page are outside of the page within the body. They have been set to position fixed.

## Auto init

Because these toolbars are not within the page they will not auto initalize. You must call the toolbar plugin yourself.

    $(function(){
    	$( "[data-role='header'], [data-role='footer']" ).toolbar();
    });

## Theme

Since external toolbars are outside the page they don't inherit a theme from the page. This means you always have to set a theme for them. You can use the `data-theme` attribute for this or set the `theme` option when you call the plugin:

    $(function(){
    	$( "[data-role='header'], [data-role='footer']" ).toolbar({ theme: "a" });
    });

## True persistent toolbars

Because External toolbars are outside of the page they are not effected by transition and make truly persistent toolbars possible.

Persistant toolbar demo

# External fixed footer