Added an experimental "updatePagePadding" method, which allows developers to adjust the page element's padding to accommodate a taller toolbar, so there is no overlap.

Addresses Issue #3484

Caveats:

- This method must be called when the toolbar is visible, meaning you'll see a visible jump when a page is shown. For this reason, I'm hesitant to recommend this feature. It would be a lot smoother to set the page padding in a custom CSS file to make up for whatever EM height your toolbars happen to be.

- Height is set in Pixels, meaning changes in font size could  render it inaccurate. If we want to set height in ems, we'll need to add an em conversion  utility function to jQM.

- To ensure it works properly, this method will need to be called on page show, and at any time a content reflow might occur: resize, orientationchange, zoom?

This method is not currently called automatically.

It can be called like this: $(".ui-header-fixed").fixedtoolbar( "updatePagePadding" );
This commit is contained in:
scottjehl 2012-01-25 18:26:04 +07:00
parent 544cdb49d6
commit 699001a3c6

View file

@ -129,7 +129,18 @@ define( [ "jquery", "jquery.mobile.widget", "jquery.mobile.core", "jquery.mobile
});
},
_visible: false,
_visible: false,
// This will set the content element's top or bottom padding equal to the toolbar's height
updatePagePadding: function() {
var $el = this.element,
header = $el.is( ".ui-header" );
// This behavior only applies to "fixed", not "fullscreen"
if( this.options.fullscreen ){ return; }
$el.closest( ".ui-page" ).css( "padding-" + ( header ? "top" : "bottom" ), $el.height() );
},
show: function(){
var hideClass = "ui-fixed-hidden",