JQuery Mobile: используйте тот же верхний колонтитул для всех страниц

Я пытаюсь реализовать некоторый код, который будет создавать верхние и нижние колонтитулы на всех моих веб-страницах, а не жестко их кодировать. Я пробовал это:

У меня было это на моей "главной странице", которую я только что назвал завернутым заголовком, который я хотел в div.

<div id="headerProto">
   <div data-role="header" data-position="fixed" data-theme="b">
       <h1> Title </h1>          
   </div> 
</div>

Затем на других страницах у меня было:

<div class="headerChild">
</div>

И я добавил:

$(".headerChild").html($("#headerProto").html());

Нет кубиков. В любом случае это была общая догадка о том, как я должен это делать. Есть ли лучший способ?

Ответ 1

Использование . load() может помочь, а затем просто поместите код, который вы хотите включить в файл, на который вы ссылаетесь.

$('.headerChild').load('pathto/headerProto.html')

Альтернативный способ, если вы не хотите хранить данные в отдельном файле: Я не сделал этого, но из некоторых быстрых исследований вы также можете связать элемент с файлом.

$('.headerChild').load('pathto/mainPage.html #headerProto')

Ответ 2

Кредит отправляется в мариачи.

http://forum.jquery.com/topic/jquery-mobile-fixed-header-and-footer-on-page-transition

Я просто вставляю его решение.

1.) Оберните свою роль data-role = "header" и поместите id = "константа-обертка".

Мобильный сидор

Используйте div, если вы хотите в обертке заголовка, но старайтесь иметь полный вывод обработанного заголовка, как в этом случае, иначе он потеряет стиль при перезагрузке страницы. ЗАМЕТКА! Поместите заголовок на первую страницу, затем этот метод просто добавляет заголовок html ко всем другим страницам.

2.) Поместите функцию в файл или встроенный script:

jQuery.fn.headerOnAllPages = function() {
    var theHeader = $('#constantheader-wrapper').html();
    var allPages = $('div[data-role="page"]');

    for (var i = 1; i < allPages.length; i++) {
        allPages[i].innerHTML = theHeader + allPages[i].innerHTML;
    }
};

3.) Вызвать функцию из документа, например:

$(document).ready(function() {
    $().headerOnAllPages();
});

Ответ 3

Я использую .clone()

В моем многостраничном проекте jQuery Mobile у меня есть заголовок на моей главной странице:

<div data-role="header" data-id="header" class="ui-header ui-bar-b" role="banner" id="headerMaster">
   <a href="#my-menu">Menu</a>
   <h1 class="ui-title" role="heading" aria-level="1">My Header</h1>
</div>

и во всех последующих страницах (или divs с data-role = page) у меня есть следующее:

<div class="headerChild">
</div>

а затем на странице, вы клонируете мастер и добавьте все дочерние элементы:

$(document).delegate("#index", "pageinit", function () {
       $("#headerMaster").clone().appendTo(".headerChild");
});

EDIT: если pageinit не работает для вас, попробуйте выполнить событие bebeecreate

$(document).delegate("#index", "pagebeforecreate", function () {
     $("#headerMaster").clone().appendTo(".headerChild");  
});