Есть ли простой способ сохранить один и тот же заголовок/нижний колонтитул при навигации по страницам jQueryMobile? Единственные решения, с которыми я сталкивался до сих пор, полагаются на его динамическое изменение при изменении страницы, но это замалчивает переходы и просто клонирует элементы, мне нужен оригинал.
Итак, есть ли официально поддерживаемый способ? Мне странно, что я кажусь единственным, кто борется с этой проблемой?
Самый простой способ - добавить атрибут "data-id" в верхние и нижние колонтитулы на всех страницах. Чтобы сделать верхний/нижний колонтитул "постоянным", используйте один и тот же идентификатор данных на всех страницах.
<div id="page1">
<div data-role="header" data-id="main-header"></div>
...
<div data-role="footer" data-id="main-footer"></div>
</div>
<div id="page2">
<div data-role="header" data-id="main-header"></div>
...
<div data-role="footer" data-id="main-footer"></div>
</div>
Вы также хотите исправить верхние и нижние колонтитулы с помощью css или data-position = "fixed".
Надеюсь, что это поможет.
Встроенное решение для вашей проблемы не существует. У jQuery Mobile нет решения, которое будет разделять верхний и нижний колонтитулы среди загруженных страниц.
Единственное, что вы можете сделать, это динамически впрыскивать их или иметь их с самого начала. В вашем случае вы делаете это в неподходящее время. Если вы хотите правильно добавить верхний и нижний колонтитулы, вам нужно сделать это во время правильного события страницы.
Рабочий пример: http://jsfiddle.net/Gajotres/xwrqn/
Проведите по экрану, чтобы изменить страницы и посмотреть, как это работает (я не хотел беспокоиться о добавлении кнопок на каждой странице).
$(document).on('pagebeforecreate', '#article2, #article3', function(){
$('<div>').attr({'data-role':'header','data-theme':'b','data-position':'fixed','data-id':'footer'}).append('<h3>Article</h3>').appendTo($(this));
$('<div>').attr({'data-role':'footer','data-theme':'b','data-position':'fixed','data-id':'footer'}).append('<h3>Article footer</h3>').appendTo($(this));
});
Если вы это сделаете во время страницы для подтверждения, это будет запускаться ТОЛЬКО один раз, когда страница будет создана в первый раз. Динамический контент будет добавлен, и поскольку функция pagebeforecreate запускается до того, как будет увеличена разметка контента, вам не нужно будет беспокоиться о стилизации заголовка и нижнего колонтитула.
Обратите внимание на атрибут 'data-id': 'footer' добавлен к каждому верхнему и нижнему колонтитулу, из-за этого только контент будет анимироваться во время перехода страницы, верхний и нижний колонтитулы будут выглядеть одинаково. Кроме того, у jsFiddle есть ошибка, когда вы прокручиваете страницы, они будут прыгать на 1-2px. Это не произойдет в реальной жизни.
Вот как я решил аналогичную проблему:
$(":mobile-pagecontainer").on("pagecontainerbeforetransition", function (event, ui) {
$("#header").prependTo(ui.toPage);
$("#control-panel").appendTo(ui.toPage);
});
Сохраняет один и тот же заголовок/нижний колонтитул при навигации по страницам jQueryMobile. Внедряет его динамически при изменении страницы, закручивает переходы, но не клонирует элементы, дает оригинал.