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

Question

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

У меня было это на моей «главной странице», которую я только что назвал завернутым заголовком, который я хотел в 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()); 

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

Answer 1

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

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

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

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

Answer 2

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

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

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

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

Mobile Сидор

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

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

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(); 
}); 

Answer 3

я использую.клон()

В моем многостраничном проекте 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> 

и во всех последующих страницах (или дивы с данными-ролью = страница) У меня есть это:

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

, а затем на pageinit клонировать мастера и добавить ко всем детям:

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

ED IT: если pageinit не работает для вас, попробуйте pagebeforecreate событие

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