jQuery Mobile: Verwenden derselben Kopf-Fußzeile für alle Seiten

Ich versuche zu implementieren, einige code, erstellen Sie die Kopf-und Fußzeilen auf allen meinen web-Seiten statt hart codieren. Ich versuchte dies:

Hatte ich das in meiner "Haupt-Seite", die ich gerade genannt wickelte den header wollte ich in einem div.

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

Dann in den anderen Seiten, die ich hatte:

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

Und ich fügte hinzu:

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

Kein Würfel. So oder so, die war total erraten, wie soll ich es tun. Gibt es einen besseren Weg?

Sind Sie nicht auf die Verwendung einer dynamischen server-Seite Sprache wie PHP zu generieren diese Seiten? Das wäre der beste Weg.
stackoverflow.com/questions/9152446/...

InformationsquelleAutor JoshDG | 2012-03-08

9

Mit .Last() helfen können, dann setzen Sie einfach den code, den Sie einbinden möchten, in die Datei, die Sie verknüpfen.
```
$('.headerChild').load('pathto/headerProto.html')
```
Einen alternativen Weg, wenn Sie nicht wollen, zu halten, die Daten in eine separate Datei:
Ich habe dies nicht getan, aber für einige schnelle Forschung Sie können auch eine Verknüpfung zu einem element innerhalb der Datei.
```
$('.headerChild').load('pathto/mainPage.html #headerProto')
```
perfekt. Danke!

InformationsquelleAutor atrljoe
4

Kredit geht zu mariachi.

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

Bin ich nur einfügen, seine Lösung.

1.) Wickeln Sie Ihre Daten-role="header" ein und setzen Sie die id="constantheader-wrapper".

Mobile sidor

Verwenden Sie ein div-wenn Sie möchten, um in der header-wrapper, sondern versuchen, auf die volle gerendert header ausgeben wie in diesem Fall, sonst verliert es das styling beim laden einer Seite. HINWEIS! Setzen Sie die Kopfzeile für die erste Seite, dann ist diese Methode fügen Sie einfach den html-header auf allen anderen Seiten.

2.) Setzen Sie die Funktion in einer Datei oder inline 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.) Rufen Sie die Funktion von Dokument bereit, zum Beispiel:
```
$(document).ready(function() {
    $().headerOnAllPages();
});
```
zu 1) hier nicht klar als mariachi schrieb eine Probe ` <header id="constantheader-wrapper"> <div data-role="header" ...> ... </div> </header>`

InformationsquelleAutor Zoha Khan
4

Ich verwenden .clone () -

In meinem mehrseitigen jQuery Mobile Projekt habe ich einen header auf mein Haupt-Seite:
```
<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>
```
und in all den folgenden Seiten (oder divs mit data-role=page) habe ich dieses:
```
<div class="headerChild">
</div>
```
und dann auf pageinit Sie Klonen der master-und Anhängen an alle Kinder:
```
$(document).delegate("#index", "pageinit", function () {
       $("#headerMaster").clone().appendTo(".headerChild");
});
```
BEARBEITEN:
wenn pageinit nicht für Sie arbeiten, versuchen Sie die pagebeforecreate Veranstaltung
```
$(document).delegate("#index", "pagebeforecreate", function () {
     $("#headerMaster").clone().appendTo(".headerChild");  
});
```
Dies funktioniert für mich, obwohl ich hatte, um es in (Dokument).bereit, anstelle der Stellvertretung.
ein Blick auf mein code-repo wieder wie es aussieht, wechselte ich von einem pageinit event der pagebeforecreate Ereignis statt, vielleicht hatte ich ärger mit pageinit zu - ich kann mich nicht erinnern, es war zu lange her 🙂 ich werde hinzufügen Bearbeiten, um die Antwort

InformationsquelleAutor ED-209

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.