jQuery Mobile Seiten-Ereignisse

jQuery Mobile Seitenereignisse

In jQuery Mobile werden Ereignisse, die sich mit Seiten befassen, in vier Kategorien unterteilt:

  • Seiteninitialisierung - Vor der Seitenerstellung, wenn die Seite erstellt wird, und nach der Seiteninitialisierung
  • Seitenladen/Entladen - Wenn externe Seiten geladen, entladen oder fehlschlagen
  • Seitenübergang - Vor und nach Seitenübergängen
  • Seitenänderung - Wenn eine Seite geändert wird oder fehlschlägt

Für vollständige Informationen zu allen jQuery Mobile-Ereignissen besuchen Sie bitte unserjQuery Mobile-Ereignis-Referenzhandbuch。

jQuery Mobile Initialisierungsereignisse

Wenn eine typische Seite in jQuery Mobile initialisiert wird, durchläuft sie drei Phasen:

  • Vor der Seitenerstellung
  • Seitenerstellung
  • Seiteninitialisierung

Die in jeder Phase ausgelösten Ereignisse können verwendet werden, um Code einzufügen oder zu manipulieren.

Ereignis Beschreibung
pagebeforecreate Dieses Ereignis wird ausgelöst, wenn die Seite gerade initialisiert werden soll und bevor jQuery Mobile mit der Verbesserung der Seite begonnen hat.
pagecreate Dieses Ereignis wird ausgelöst, wenn die Seite erstellt wurde, aber bevor die Verbesserung abgeschlossen ist.
pageinit Dieses Ereignis wird ausgelöst, wenn die Seite initialisiert wurde und nachdem jQuery Mobile die Verbesserung der Seite abgeschlossen hat.

Das folgende Beispiel zeigt, wann die einzelnen Ereignistypen beim Erstellen einer Seite in jQuery Mobile ausgelöst werden:

Beispiel

$(document).on("pagebeforecreate",function(event){
alert("pagebeforecreate event triggered!");
});
$(document).on("pagecreate",function(event){
alert("pagecreate event triggered!");
});

Selbst ausprobieren »

jQuery Mobile Ladeereignisse

Seitenladeereignisse gelten für externe Seiten.

Immer wenn eine externe Seite in das DOM geladen wird, werden zwei Ereignisse ausgelöst. Das erste ist pagebeforeload, und das zweite ist pageload (Erfolg) oder pageloadfailed (Fehler).

Die folgende Tabelle erläutert diese Ereignisse:

Ereignis Beschreibung
pagebeforeload Wird ausgelöst, bevor eine Anfrage zum Laden einer Seite gestellt wird.
pageload Wird ausgelöst, nachdem die Seite erfolgreich geladen und in das DOM eingefügt wurde.
pageloadfailed Wenn die Seitenladeanforderung fehlschlägt, wird dieses Ereignis ausgelöst. Standardmäßig wird die Meldung "Fehler beim Laden der Seite" angezeigt.

Das Folgende veranschaulicht, wie die Ereignisse pageload und pagloadfailed funktionieren:

Beispiel

$(document).on("pageload",function(event,data){
alert("pageload event triggered!\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
alert("Entschuldigung, die angeforderte Seite existiert nicht.");
});

Selbst ausprobieren »

jQuery Mobile Übergangsereignisse

Wir können auch Ereignisse verwenden, wenn von einer Seite zur nächsten gewechselt wird.

Seitenübergänge beinhalten zwei Seiten: eine "from"-Seite und eine "to"-Seite - diese Übergänge machen den Vorgang des Wechsels von der aktuell aktiven Seite (der "from"-Seite) zur neuen Seite (der "to"-Seite) dynamischer.

Ereignis Beschreibung
pagebeforeshow Wird auf der "to"-Seite ausgelöst, bevor die Übergangsanimation beginnt.
pageshow Wird auf der "to"-Seite ausgelöst, nachdem die Übergangsanimation abgeschlossen ist.
pagebeforehide Wird auf der "from"-Seite ausgelöst, bevor die Übergangsanimation beginnt.
pagehide Wird auf der "from"-Seite ausgelöst, nachdem die Übergangsanimation abgeschlossen ist.

Das Folgende zeigt, wie das Timing von Übergängen funktioniert:

Beispiel

$(document).on("pagebeforeshow","#pagetwo",function(){ // beim Betreten von Seite zwei
alert("Seite zwei wird gleich angezeigt");
});
$(document).on("pageshow","#pagetwo",function(){ // beim Betreten von Seite zwei
alert("Seite zwei wird jetzt angezeigt");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // beim Betreten von Seite zwei
alert("Seite zwei wird gleich ausgeblendet");
});
$(document).on("pagehide","#pagetwo",function(){ // Beim Verlassen von Seite zwei
alert("Seite zwei ist jetzt ausgeblendet");
});

Selbst ausprobieren »
Andere Erweiterungen