Fixed toolbars

Home Search

Fixed toolbars

The fixedtoolbar plugin has the following methods:

show show the toolbar

$("[data-position='fixed']").fixedtoolbar('show');

Note: Prior to version 1.1, the following syntax was used to show the toolbars, but it is no longer supported:


$.mobile.fixedToolbars.show(true);
hide hide the toolbar (if it's not a fullscreen toolbar, it'll toggle back to static positioning, which may or may not be hidden from view depending on scroll)

$("[data-position='fixed']").fixedtoolbar('hide');
		   				
toggle calls either the show or the hide method, depending on whether the toolbar is visible.

$("[data-position='fixed']").fixedtoolbar('toggle');
		   				
updatePagePadding update the padding (either top or bottom, depending on if the toolbar is a header or a footer) of the page element parent of the toolbar to match the height of the toolbar.

$("[data-position='fixed']").fixedtoolbar('updatePagePadding');
		   				

There is also an updatelayout event that can be used to trigger the toolbars to re-position. Developers who are building dynamic applications that inject content into the current page can also manually trigger this updatelayout event to ensure components on the page update in response to the new content that was just added. This event is used internally in the collapsible and listview filter plugins and is powerful because it's not toolbar-specific -- any widget can be built to listen for the updatelayout event to update the widget in response.

destroy destroy at fixedtoolbar (restore the element to its initial state)

$("[data-position='fixed']").fixedtoolbar('destroy');