Изображение в фиксированном заголовке jquery mobile перекрывает содержимое до изменения размера

Ответ 1

Я думаю, проблема в том, что, когда jQuery Mobile инициализирует страницу, изображение заголовка не загружается, а заголовок намного меньше, поэтому jQuery Mobile помещает дополнение на элемент .ui-page, который слишком мал после загрузки изображения. Простое исправление для этого - это вручную задать размер изображения заголовка, чтобы он занимал необходимое пространство даже до того, как его источник загрузился.

Вы также можете сделать это, хотя мне кажется довольно взломанным, заставьте перерисовать, вызвав событие resize на document.ready или, возможно, window.load:

$(window).on('load', function () {
    $(this).trigger('resize');
});

Я вставил этот код в консоль, находясь на вашей странице, и повторно разместил элемент заголовка, как ожидалось.

Ответ 2

Используется ли следующая CSS-помощь?

.ui-page {
    padding-top: 91px !important;
}

Обратите внимание, что вам нужно будет уточнить селектор, поскольку это применимо и к всплывающим окнам.

Ответ 3

У меня было много проблем с этим. Это сработало, пока я не захотел добавить ссылку:

<div data-role="header">
  <img border="0" src="logo.png" style="float:left;display:inline"/> <h1></h1>
</div>

Обратите внимание на пустой тег h1.

В итоге я вообще не использовал data-role = "header", я просто не мог заставить его работать со ссылкой. Вместо этого я использовал класс ui-bar. Вот так:

<div class="ui-bar ui-bar-a">
    <a href="/" data-role="none">
        <img border="0" src="images/logo.png" style="float: left; display:inline">
    </a>
</div>

Ответ 4

Решение, основанное на ответе @Jasper, которое сработало для меня, было:

$(document).on('pageshow', "div[data-role='page']", function () {
    $(window).trigger('resize');
});

У него есть улучшения, которые применяются ко всем страницам jquery mobile

Ответ 5

Я играл с довольно хорошими решениями от Jasper и Carlos487 и нашел, что это самый современный и надежный способ сделать это (jQM 1.4.x):

• , если он из-за изображения без указанных размеров, для которого потребуется некоторое время для загрузки и, следовательно, может привести к увеличению заголовка, затем указать известные размеры (в идеале через CSS) должны делать это. В противном случае должен быть способ определить, закончил ли он загрузку и тем самым применил идею решения 3. ниже.

• , если это связано с некоторым (возможно) <сильным > неизвестным событием изменения размера заголовка (например, через некоторое загруженное изображение позже или другое содержимое, уменьшающее заголовок и, таким образом, создание он по вертикали больше), то это должно работать с разумным большим значением таймаута:

  $( ':mobile-pagecontainer' ).on( 'pagecontainershow', function(e) {
    // maybe value > 100 needed for your scenario / page load speed
    setTimeout( function() { $(window).trigger('resize'); }, 100 /*ms*/ );
  }
  

• , если вы знаете, что вызывает этот (как в моем случае, когда я правильно перемещаю содержимое страницы на больших экранах с помощью некоторой (в противном случае скрытой) наложенной слева навигационной панели), то следующее может быть даже лучше, не зависит от фактического времени загрузки страницы на каком-либо устройстве или сценарии (что может быть больше, чем ваш предопределенный таймаут выше):

  // if its due to some animation like in my case
  // otherwise try to find a similar way to determine when the resizing event has 
  // completed!
  $('#someAnimated').animate( 'complete', function() { $(window).trigger('resize'); });
  

(Я не уверен, что решение Jaspers с использованием $(window).on( 'load', ... будет правильным во всех сценариях загрузки jQM-страниц (с навигацией по страницам AJAX). Поэтому я предпочел бы подход Carlos487 в моем примере.)

Ответ 6

Ни одно из вышеперечисленных решений не работало для меня. Но я обнаружил, что моя проблема заключается в событиях после навигации по страницам. Если содержимое div скрыто в течение этого времени, оно не попадает в поле заголовка div, а остается в исходном месте:

$(document).on("pageshow", "div[data-role='page']", function()
{
   $("#pageContentDiv").hide();
   setTimeout(function()
   {
      $("#pageContentDiv").show();
   }, 0);
});

EDIT: Нашел лучшее решение; установите высоту заголовка заголовка и верхнее дополнение страницы div вверх к тому же значению:

<div data-role="page" style="padding-top: 60px">
<div data-role="header" data-position="fixed" style="height: 60px">

Надеюсь, что это поможет.