Контекст:
Я пытаюсь вычислить доступное вертикальное неиспользуемое пространство на мобильной странице jquery и использовать результат для определения размера элемента, чтобы использовать максимально доступное пространство.
Я не могу начать вычисление ДО того, как страница закончит переход IN, потому что высота элементов заголовка, нижнего колонтитула и содержимого установлена в 0, когда страница не видна.
Я использую событие pagehow, чтобы определить, когда переход страницы завершен, и выполнить мои вычисления, но обнаружил, что высота нижнего колонтитула по-прежнему равна 0, когда переход должен быть завершен, хотя на самом деле он составляет 51 пикселя. также высота страницы возвращает высоту, значительно меньшую, чем высота окна или документа, что не имеет место после полного перехода.
У меня сложилось впечатление, что в момент запуска события pagehow переход страницы фактически завершен, в то время как в соответствии с документацией его следует запускать только после завершения, то есть все элементы должны иметь конечную высоту.
Кто-нибудь знает лучше или может указать на какую-то очевидную ошибку в моем понимании этого события?
На данный момент я решил свою проблему, установив жестко закодированные значения, но предпочел бы написать обобщенную функцию, которая будет работать.
Мой код урезан:
Работа с HTML страницей:
...
<div data-role="page" id="pWhereAmI">
<div data-role="header" data-id="mainHeader" data-position="fixed">
<h1>Where Am I ?</h1>
</div>
<div data-role="content" class="map-content">
<ul data-role="listview" data-inset="true">
<li>Position Unknown</li>
<li id="map_canvas"></li>
<li>Center the map</li>
</ul>
</div>
<div data-role="footer" class="nav-glyphish-example" data-id="mainFooter" data-position="fixed">
<div data-role="navbar" class="nav-glyphish-example" data-grid="d">
<ul>
<li><a href="#pLogin" id="home" data-transition="fade" data-icon="custom"><small>Login</small></a></li>
</ul>
</div>
</div>
</div><!-- /page pWhereAmI -->
...
Использование кода JavaScript:
$('#pWhereAmI').live('pageshow',function(event, ui) {
pageFreeHeight = pageFreeHeight_calc('#pWhereAmI');
map_canvasHeight = $('#map_canvas').height() + pageFreeHeight;
$('#map_canvas').height(map_canvasHeight);
});
Функция, вызываемая во время события просмотра страницы:
function pageFreeHeight_calc(pageSelector) {
if($(pageSelector).height != null) {
pageHeight = $(pageSelector).height();
}
else {
return null;
}
if($(pageSelector+' [data-role|="header"]').outerHeight(true) != null) {
headerHeight = $(pageSelector+' [data-role|="header"]').outerHeight(true);
}
else {
headerHeight = 0;
}
if($(pageSelector+' [data-role|="content"]').outerHeight(true) != null) {
contentHeight = $(pageSelector+' [data-role|="content"]').outerHeight(true);
}
else {
contentHeight = 0;
}
if($(pageSelector+' [data-role|="footer"]').outerHeight(true) != null) {
footerHeight = $(pageSelector+' [data-role|="footer"]').outerHeight(true);
}
else {
footerHeight = 0;
}
return pageHeight - headerHeight - contentHeight - footerHeight;
}