jQuery Mobile: Użyj tej samej stopki nagłówka dla wszystkich stron

Question

Próbuję zaimplementować kod, który utworzy nagłówki i stopki na wszystkich moich stronach internetowych zamiast ich twardego kodowania. Próbowałem tego:

Miałem to na mojej "głównej stronie", którą właśnie nazwałem, zawinąłem nagłówek, który chciałem w div.

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

Następnie w innych stronach miałem:

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

I dodałem:

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

nie ma kości. Tak czy inaczej to było całkowite odgadnięcie, jak mam to zrobić. Czy istnieje lepszy sposób?

Answer 1

Korzystanie z .load() może pomóc, a następnie po prostu wpisz kod, który chcesz dołączyć do pliku, do którego linkujesz.

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

Alternatywnym sposobem, jeśli nie chcesz zachować dane w osobnym pliku: Nie zrobiłem tego, ale z jakiegoś szybkiego badania można również odwołuje się do elementu w pliku.

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

Answer 2

Kredyt trafia do mariachi.

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

jestem po prostu wklejając jego rozwiązanie.

1.) Zawiń swoją rolę danych = "nagłówek" i wstaw id = "constantheader-wrapper".

Komórka Sidor

Użyj div jeśli chcesz w opakowaniu nagłówka, ale staram się mieć pełną świadczonych wyjście nagłówka jak w tym przypadku, inaczej będzie to luźne stylizacji podczas przeładowania Strona. UWAGA! Umieść nagłówek na pierwszej stronie, a następnie tę metodę dodaj nagłówek html do wszystkich innych stron.

2.) Put funkcji w skrypcie pliku lub inline:

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.) Wywołanie funkcji z dokumentu gotowego, na przykład:

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

Answer 3

używam.clone()

W moim wielostronicowego projektu jQuery Mobile I mieć nagłówek na mojej stronie głównej:

<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> 

i we wszystkich kolejnych stronach (lub DIV z danymi-role = stronie) mam to:

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

a następnie na pageinit można sklonować mistrza i dołączyć do wszystkich dzieci:

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

ED IT: jeśli pageinit nie działa dla Ciebie, spróbuj pagebeforecreate zdarzenie

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