External toolbars

The header and footer on this page are positioned outside the page. They are before and after the page within the body. These Toolbars will remain in the dom until manually removed. If you navigate to a page that does not have a header or footer within it these toolbars will persist. Otherwise they will hide to allow the page's internal header and footer to show.

Markup

The markup for external toolbars is identical to normal toolbars, you just place the toolbar outside the page within the body of your page

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']" ).toolbar({ theme: "a" });
});

AJAX navigation

Because these toolbars are not within the page they will remain in the DOM until manually removed. However they will automatically hide if you navigate to a page containing a toolbar to allow the page's own toolbars to take their place. They will automatically show again if you navigate to a page containing no toolbars.

Toolbars not within a page will not be pulled into the DOM during AJAX navigation.

Fixed external toolbars

External toolbars can also be set to fixed positioning just like normal toolbars: External fixed toolbars