jQuery Mobile-Seitenereignisse

jQuery Mobile-Seitenereignisse

In jQuery Mobile werden Ereignisse, die mit der Seite umgehen, in vier Kategorien unterteilt:

  • Seiteninitialisierung - Vor der Erstellung der Seite, beim Erstellen der Seite und nach der Initialisierung der Seite
  • Seitenladen/Entladen - Wenn externe Seiten geladen, entladen oder ein Fehler auftritt
  • Seitenübergang - Vor und nach dem Übergang der Seite
  • Seitenänderung - Wenn die Seite geändert wird oder ein Fehler auftritt

Für vollständige Informationen zu allen jQuery Mobile Ereignissen besuchen Sie bitte unsere jQuery Mobile Referenzhandbuch.

jQuery Mobile Initialization Ereignis

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

  • Vor der Erstellung der Seite
  • Seitenerstellung
  • Seiteninitialisierung

Jedes Ereignis, das in jeder Phase ausgelöst wird, kann verwendet werden, um Code einzufügen oder zu manipulieren.

Ereignis Beschreibung
pagebeforecreate Das Ereignis wird ausgelöst, wenn die Seite gerade initialisiert wird und jQuery Mobile noch nicht mit dem Verstärken der Seite begonnen hat.
pagecreate Das Ereignis wird ausgelöst, wenn die Seite erstellt wurde, aber das Verstärken noch nicht abgeschlossen ist.
pageinit Dieses Ereignis wird ausgelöst, wenn die Seite initialisiert wurde und jQuery Mobile die Seite verstärkt hat.

Der folgende Beispiel zeigt, wann每种事件在 jQuery Mobile 页面创建时被触发：

Beispiel

$("document").on("pagebeforecreate",function(event){
  alert("pagebeforecreate Ereignis ausgelöst!");
}); 
$("document").on("pagecreate",function(event){
  alert("pagecreate Ereignis ausgelöst!");
});
$("document").on("pageinit",function(event){
  alert("pageinit Ereignis ausgelöst!");
});

Selbst ausprobieren

jQuery Mobile Load Ereignisse

Seitenladereignisse gehören zu externen Seiten.

Unabhängig davon, wann eine externe Seite in den DOM geladen wird, werden zwei Ereignisse ausgelöst. Das erste ist pagebeforeload, das zweite ist pageload (erfolgreich) oder pageloadfailed (fehlgeschlagen).

In der folgenden Tabelle werden diese Ereignisse erläutert:

Ereignis Beschreibung
pagebeforeload Wird ausgelöst, bevor ein jeder Seitenladeantrag gemacht wird.
pageload Wird ausgelöst, wenn die Seite erfolgreich geladen und in den DOM eingefügt wurde.
pageloadfailed Wird ein Seitenladeforderungsantrag fehlgeschlagen, wird dieses Ereignis ausgelöst. Standardmäßig wird die Nachricht "Error Loading Page" angezeigt.

Nachfolgend wird der Arbeitsmechanismus der pageload und pageloadfailed Ereignisse gezeigt:

Beispiel

$("document").on("pageload",function(event,data){
  alert("pageload Ereignis ausgelöst!\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 geübergangsweise übergegangen wird.

Die Seitenumleitung betrifft zwei Seiten: eine "kommende" Seite und eine "gehende" Seite - diese Übergänge machen den Prozess der Umleitung der aktuellen aktiven Seite ("kommende" Seite) zur neuen Seite ("gehende" Seite) beweglicher.

Ereignis Beschreibung
pagebeforeshow Wird auf der "gehenden" Seite ausgelöst, bevor die Übergangsanimation beginnt.
pageshow Wird auf der "gehenden" Seite ausgelöst, nach Abschluss der Übergangsanimation.
pagebeforehide Wird auf der "kommenden" Seite ausgelöst, bevor die Übergangsanimation beginnt.
pagehide Wird auf der "kommenden" Seite ausgelöst, nach Abschluss der Übergangsanimation.

Nachfolgend wird der Arbeitsmechanismus der Übergangszeit gezeigt:

Beispiel

$("document").on("pagebeforeshow","#pagetwo",function(){ // Wenn die Seite zwei betreten wird
  alert("Seite zwei wird angezeigt");
});
$("document").on("pageshow","#pagetwo",function(){ // Wenn die Seite zwei betreten wird
  alert("Die Seite zwei wird angezeigt");
});
$("document").on("pagebeforehide","#pagetwo",function(){ // Wenn die Seite zwei verlassen wird
  alert("Die Seite zwei wird ausgeblendet");
});
$("document").on("pagehide","#pagetwo",function(){ // Wenn die Seite zwei verlassen wird
  alert("Die Seite zwei wird ausgeblendet");
});

Selbst ausprobieren