jQuery Mobile Sayfa Olayları

jQuery Mobile Sayfa Olayları

jQuery Mobile'da sayfa ile ilgili olaylar dört kategoriye ayrılır:

  • Sayfa Başlatma - Sayfa oluşturulmadan önce, sayfa oluşturulduğunda ve sayfa başlatıldıktan sonra
  • Sayfa Yükleme/Çıkarma - Dış sayfa yüklendiğinde, çıkarıldığında veya başarısız olduğunda
  • Sayfa Geçişi - Sayfa geçişi öncesi ve sonrası
  • Sayfa Değişimi - Sayfa değiştirildiğinde veya başarısız olduğunda

Tüm jQuery Mobile olayları hakkında tam bilgi için, sitemizi ziyaret edin: jQuery Mobile Olay Referans Kılavuzu.

jQuery Mobile Başlatma Olayı

jQuery Mobile'da bir tipik sayfa başlatıldığında, üç aşama geçer:

  • Sayfa oluşturulmadan önce
  • Sayfa Oluşturma
  • Sayfa Başlatma

Her aşamada tetiklenen olaylar, kodu eklemek veya işlemek için kullanılabilir.

Olay Açıklama
pagebeforecreate Sayfa başlatılmaya hazırlanırken ve jQuery Mobile sayfanın güçlendirilmesi başlamadan önce bu olay tetiklenir.
pagecreate Sayfa oluşturulduğunda, güçlendirme tamamlanmadan önce bu olay tetiklenir.
pageinit Sayfa başarılı bir şekilde initialized ve jQuery Mobile sayfa güçlendirmesini tamamladıktan sonra bu olay tetiklenir.

Aşağıdaki örnek, jQuery Mobile'da sayfa oluşturulduğunda hangi olayların ne zaman tetiklendiğini gösterir:

Örnek

$(document).on("pagebeforecreate",function(event){
  alert("pagebeforecreate olayını tetikledi!");
}); 
$(document).on("pagecreate",function(event){
  alert("pagecreate olayını tetikledi!");
});
$(document).on("pageinit",function(event){
  alert("pageinit olayını tetikledi!");
});

Kişisel Olarak Deneyin

jQuery Mobile Yüklenme Olayları

Sayfa yüklenme olayları dış sayfalara aittir.

Dış sayfa DOM'a yüklenirken herhangi bir zamanda iki olay tetiklenir. İlk olan pagebeforeload, ikincisi ise pageload (başarılı) veya pageloadfailed (başarısız).

Aşağıdaki tabloda bu olaylar açıklandığı gibi gösterilmiştir:

Olay Açıklama
pagebeforeload Herhangi bir sayfa yüklenme isteği yapılmadan önce tetiklenir.
pageload Sayfa başarılı bir şekilde yüklendi ve DOM'a eklendikten sonra tetiklenir.
pageloadfailed Sayfa yüklenme isteği başarısız olursa bu olay tetiklenir. Varsayılan olarak, "Sayfa Yüklenirken Hata" mesajı gösterilir.

Aşağıdaki, pageload ve pageloadfailed olaylarının nasıl çalıştığını gösterir:

Örnek

$(document).on("pageload",function(event,data){
  alert("pageload olayını tetikledi!\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
  alert("Üzgünüm, istenen sayfa mevcut değil.");
});

Kişisel Olarak Deneyin

jQuery Mobile Geçiş Olayları

Ayrıca, bir sayfadan bir sonraki sayfaya geçiş yaparken olayları kullanabiliriz.

Sayfa geçişleri iki sayfa içerir: bir 'gelen' sayfası ve bir 'giden' sayfası - bu geçişler, mevcut etkin sayfa ('gelen' sayfası) yeni sayfaya ('giden' sayfası) geçiş sürecini daha dinamik hale getirir.

Olay Açıklama
pagebeforeshow “Giden” sayfasında tetiklenir, geçiş animasyonu başlamadan önce.
pageshow “Giden” sayfasında tetiklenir, geçiş animasyonu tamamlandıktan sonra.
pagebeforehide “Gelen” sayfasında tetiklenir, geçiş animasyonu başlamadan önce.
pagehide “Gelen” sayfasında tetiklenir, geçiş animasyonu tamamlandıktan sonra.

Aşağıdaki, geçiş süresinin nasıl çalıştığını gösterir:

Örnek

$(document).on("pagebeforeshow","#pagetwo",function(){ // Sayfa iki'ye girilirken
  alert("Sayfa iki yakında görüntülenecek");
});
$(document).on("pageshow","#pagetwo",function(){ // Sayfa iki'ye girilirken
  alert("Şu anda sayfa iki gösteriliyor");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // Sayfa iki'den ayrılırken
  
});
$(document).on("pagehide","#pagetwo",function(){ // Sayfa iki'den ayrılırken
  alert("Şu anda sayfa iki gizleniyor");
});

Kişisel Olarak Deneyin