jQuery Mobile รายการเหตุการณ์หน้า

jQuery Mobile รายการเหตุการณ์หน้า

เหตุการณ์ที่เกี่ยวกับหน้าเว็บใน jQuery Mobile ถูกแบ่งออกเป็นสี่ประเภท:

  • Page Initialization - ก่อนที่หน้าเว็บจะถูกสร้าง ขณะที่หน้าเว็บถูกสร้าง และหลังจากการเริ่มต้นหน้าเว็บ
  • Page Load/Unload - เมื่อหน้าเว็บภายนอกถูกโหลด หรือถูกปลด หรือเกิดข้อผิดพลาด
  • Page Transition - ก่อนและหลังจากการเปลี่ยนหน้าเว็บ
  • Page Change - เมื่อหน้าเว็บถูกเปลี่ยน หรือเกิดข้อผิดพลาด

ถ้าต้องการข้อมูลเบื้องต้นเกี่ยวกับเหตุการณ์ทั้งหมดของ jQuery Mobile โปรดเข้าถึง คู่มือเหตุการณ์ jQuery Mobile.

เหตุการณ์ Initialization ของ jQuery Mobile

เมื่อหน้าเว็บปกติของ jQuery Mobile กำลังเริ่มต้นการสร้าง มันจะผ่านสามขั้นตอน:

  • ก่อนที่จะสร้างหน้าเว็บ
  • การสร้างหน้าเว็บ
  • การเริ่มต้นหน้าเว็บ

เหตุการณ์ที่จะกระตุ้นในแต่ละขั้นตอนสามารถใช้เพื่อใส่หรือปฏิบัติรหัส

เหตุการณ์ รายละเอียด
pagebeforecreate เมื่อหน้าเว็บกำลังรอเริ่มต้น และ jQuery Mobile ได้เริ่มกระตุ้นการเพิ่มเติมหน้าเว็บ จะกระตุ้นเหตุนี้
pagecreate เมื่อหน้าเว็บได้ถูกสร้างแล้ว แต่ก่อนที่จะเสร็จสิ้นการกระตุ้นการเพิ่มเติม จะกระตุ้นเหตุนี้
pageinit เมื่อหน้าเพจได้ถูกจัดการและ jQuery Mobile ได้ทำการเพิ่มเสริมหน้าเพจที่สำเร็จ จะเกิดเหตุการณ์นี้ขึ้น。

ตัวอย่างด้านล่างแสดงให้เห็นเวลาที่เกิดเหตุการณ์แต่ละรายการขณะที่สร้างหน้าที่ด้วย jQuery Mobile:

ตัวอย่าง

$(document).on("pagebeforecreate",function(event){
  alert("เกิดเหตุการณ์ pagebeforecreate ขึ้น!");
}); 
$(document).on("pagecreate",function(event){
  alert("เกิดเหตุการณ์ pagecreate ขึ้น!");
});
$(document).on("pageinit",function(event){
  alert("เกิดเหตุการณ์ pageinit ขึ้น!");
});

ลองด้วยตัวเอง

เหตุการณ์การโหลด jQuery Mobile

เหตุการณ์การโหลดเป็นเหตุการณ์ทางนอก。

ไม่ว่าหน้าเว็บภายนอกจะโหลดเข้า DOM ในตอนใดก็ตาม จะมีเหตุการณ์สองเหตุการณ์: หนึ่งคือ pagebeforeload และอีกหนึ่งคือ pageload (สำเร็จ) หรือ pageloadfailed (ล้มเหลว)。

ตารางด้านล่างชี้แจงเหตุการณ์เหล่านี้:

เหตุการณ์ รายละเอียด
pagebeforeload ดูเหมือนก่อนการขอการโหลดเพจใดๆ ในหน้าที่โหลด。
pageload ดูเหมือนบนเพจที่โหลดแล้วและถูกใส่เข้าสู่ DOM หลังจากนั้น。
pageloadfailed ถ้าการขอการโหลดเพจล้มเหลว ก็จะเกิดเหตุการณ์นี้ขึ้น โดยเริ่มต้นด้วยข้อความ "Error Loading Page" โดยเริ่มต้น。

ดังนั้น ดังนี้แสดงให้เห็นหลักการทำงานของเหตุการณ์ pageload และ pageloadfailed:

ตัวอย่าง

$(document).on("pageload",function(event,data){
  alert("เกิดเหตุการณ์ pageload ขึ้น!\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
  alert("ขอโทษ หน้าที่ถูกขอไม่มีอยู่");
});

ลองด้วยตัวเอง

เหตุการณ์การเปลี่ยนเพจ jQuery Mobile

เรายังสามารถใช้เหตุการณ์ในการเปลี่ยนหน้าจากเพจหนึ่งไปยังเพจต่อไปได้。

การเปลี่ยนเพจทางเว็บไซต์มีสองเพจ: หน้าที่มา และหน้าที่จะเลิก - ข้อเสนอนี้ทำให้กระบวนการเปลี่ยนเพจที่กำลังใช้อยู่ (หน้าที่มา) ไปยังหน้าใหม่ (หน้าที่จะเลิก) มีรูปแบบที่มีประสิทธิภาพมากขึ้น。

เหตุการณ์ รายละเอียด
pagebeforeshow ดูเหมือนบนเพจที่จะเลิก ก่อนการเริ่มแอนิเมชั่นของการเปลี่ยนเพจ。
pageshow ดูเหมือนบนเพจที่จะเลิก หลังจากการเคลื่อนไหวในแอนิเมชั่นของการเปลี่ยนเพจจบลง。
pagebeforehide ดูเหมือนบนเพจที่มา ก่อนการเริ่มแอนิเมชั่นของการเปลี่ยนเพจ。
pagehide ดูเหมือนบนเพจที่มา หลังจากการเคลื่อนไหวในแอนิเมชั่นของการเปลี่ยนเพจจบลง。

ดังนั้น ดังนี้แสดงให้เห็นหลักการทำงานของเวลาในการเปลี่ยนเพจ:

ตัวอย่าง

$(document).on("pagebeforeshow","#pagetwo",function(){ // ขณะที่เข้าหน้าเว็บที่สอง
  alert("页面二即将显示");
});
$(document).on("pageshow","#pagetwo",function(){ // ขณะที่เข้าหน้าเว็บที่สอง
  alert("ปรากฏหน้าเว็บที่สองตอนนี้");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // ขณะที่ออกจากหน้าเว็บที่สอง
  alert("หน้าเว็บที่สองจะถูกปิด");
});
$(document).on("pagehide","#pagetwo",function(){ // ขณะที่ออกจากหน้าเว็บที่สอง
  alert("ปิดหน้าเว็บที่สองตอนนี้");
});

ลองด้วยตัวเอง