Acara Halaman jQuery Mobile

Acara Halaman jQuery Mobile

Peristiwa yang berhubungan dengan halaman di dalam jQuery Mobile dibagi menjadi empat kategori:

  • Inisialisasi Halaman - Sebelum halaman dibuat, saat halaman dibuat, dan setelah halaman diinisialisasi
  • Muat/Unmuat Halaman - Saat halaman eksternal dimuat, diunmuat, atau mengalami kegagalan
  • Transisi Halaman - Sebelum dan setelah transisi halaman
  • Perubahan Halaman - Saat halaman diubah, atau mengalami kegagalan

Untuk informasi lengkap tentang semua peristiwa jQuery Mobile, silakan kunjungi Panduan Referensi Peristiwa jQuery Mobile.

Peristiwa Initialization jQuery Mobile

Saat halaman tipikal di jQuery Mobile sedang diinisialisasi, ia akan melalui tiga tahap:

  • Sebelum pembuatan halaman
  • Pembuatan halaman
  • Inisialisasi halaman

Peristiwa yang diaktifkan di setiap tahap dapat digunakan untuk memasukkan atau mengoperasikan kode.

Peristiwa Deskripsi
pagebeforecreate Saat halaman akan diinisialisasi, dan jQuery Mobile telah mulai mengembangkan halaman, peristiwa ini diaktifkan.
pagecreate Saat halaman telah dibuat, tetapi pengembangan belum selesai, peristiwa ini diaktifkan.
pageinit Peristiwa ini di trigger ketika halaman sudah diinisialisasi dan jQuery Mobile telah selesai meningkatkan halaman.

Contoh di bawah menunjukkan kapan setiap peristiwa di trigger saat halaman dibuat di jQuery Mobile:

Contoh

$(document).on("pagebeforecreate",function(event){
  alert("Peristiwa pagebeforecreate di trigger!");
}); 
$(document).on("pagecreate",function(event){
  alert("Peristiwa pagecreate di trigger!");
});
$(document).on("pageinit",function(event){
  alert("Peristiwa pageinit di trigger!");
});

Coba Sendiri

Peristiwa Pemuat Halaman jQuery Mobile

Peristiwa pemuat halaman termasuk halaman eksternal.

Tidak kira saat halaman eksternal dimuat ke DOM, akan di trigger dua peristiwa. Pertama adalah pagebeforeload, kedua adalah pageload (berhasil) atau pageloadfailed (gagal).

Tabel di bawah menjelaskan peristiwa ini:

Peristiwa Deskripsi
pagebeforeload Ditrigger sebelum permintaan pemuat halaman apapun diambil.
pageload Ditrigger setelah halaman sukses dimuat dan disisipkan ke DOM.
pageloadfailed Jika permintaan pemuat halaman gagal, peristiwa ini akan di trigger. Secara default, pesan "Error Loading Page" akan ditampilkan.

Berikut adalah contoh kerja prinsip peristiwa pageload dan pageloadfailed:

Contoh

$(document).on("pageload",function(event,data){
  alert("Peristiwa pageload di trigger!\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
  alert("Maaf, halaman yang diminta tidak ada.");
});

Coba Sendiri

Peristiwa Transisi jQuery Mobile

Kami juga dapat menggunakan peristiwa saat berpindah dari halaman ke halaman berikutnya.

Transisi halaman melibatkan dua halaman: satu halaman 'datang' dan satu halaman 'pergi' - transisi ini membuat proses perubahan halaman aktif (halaman 'datang') ke halaman baru (halaman 'pergi') menjadi lebih dinamis.

Peristiwa Deskripsi
pagebeforeshow Ditrigger di halaman pergi, sebelum animasi transisi dimulai.
pageshow Ditrigger di halaman pergi, setelah animasi transisi selesai.
pagebeforehide Ditrigger di halaman datang, sebelum animasi transisi dimulai.
pagehide Ditrigger di halaman datang, setelah animasi transisi selesai.

Berikut adalah contoh kerja prinsip waktu transisi:

Contoh

$(document).on("pagebeforeshow","#pagetwo",function(){ // Saat memasuki halaman kedua
  alert("Halaman kedua akan muncul");
});
$(document).on("pageshow","#pagetwo",function(){ // Saat memasuki halaman kedua
  alert("Halaman kedua sekarang ditampilkan");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // Saat meninggalkan halaman kedua
  alert("Halaman kedua segera disembunyikan");
});
$(document).on("pagehide","#pagetwo",function(){ // Saat meninggalkan halaman kedua
  alert("Halaman kedua sekarang disembunyikan");
});

Coba Sendiri