ล่าสุดการพัฒนาเว็บบทเรียน
 

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

❮ก่อนหน้า ถัดไปบท❯

เหตุการณ์มือถือ jQuery หน้า

กิจกรรมสำหรับการจัดการหน้าใน jQuery มือถือจะถูกแบ่งออกเป็นสี่ประเภท

  • หน้าเริ่มต้น - ก่อนที่จะสร้างหน้าและเมื่อหน้าได้ถูกสร้างขึ้น
  • โหลดหน้า / ยกเลิกการโหลด - เมื่อหน้าภายนอกบรรทุกขนถ่ายหรือพบความล้มเหลว
  • การเปลี่ยนหน้า - ก่อนและหลังการเปลี่ยนหน้า
  • เปลี่ยนหน้า - เมื่อหน้าเว็บที่มีการเปลี่ยนแปลงไปยังหรือจากหรือพบความล้มเหลว

สำหรับการอ้างอิงที่สมบูรณ์ของทุกเหตุการณ์ jQuery Mobile โปรดไปที่เรา มือถือ jQuery เหตุการณ์อ้างอิง

เหตุการณ์มือถือ jQuery การเริ่มต้น

เมื่อเพจทั่วไปในมือถือ jQuery จะเริ่มต้นก็จะต้องผ่านขั้นตอนที่สอง:

  • ก่อนที่จะสร้างหน้า
  • สร้างหน้า

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

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

ตัวอย่างด้านล่างนี้แสดงให้เห็นถึงเมื่อแต่ละเหตุการณ์ไฟไหม้เมื่อเพจถูกสร้างขึ้นใน jQuery มือถือ:

ตัวอย่าง

$(document).on("pagebeforecreate",function(event){
  alert("pagebeforecreate event fired!");
});
$(document).on("pagecreate",function(event){
  alert("pagecreate event fired!");
});
ลองตัวเอง»

มือถือ jQuery เหตุการณ์โหลด

เหตุการณ์ที่เกิดขึ้นในการโหลดหน้าเว็บสำหรับหน้าเว็บภายนอก

เมื่อใดก็ตามที่หน้าภายนอกถูกโหลดลงใน DOM 2 เหตุการณ์ไฟไหม้ ที่แรกก็คือ pagecontainerbeforeload และที่สองจะมีทั้ง pagecontainerload (ความสำเร็จ) หรือ pagecontainerloadfailed (ล้มเหลว)

เหตุการณ์เหล่านี้มีการอธิบายในตารางด้านล่าง:

เหตุการณ์ ลักษณะ
pagecontainerbeforeload เรียกร้องขอใด ๆ ก่อนการโหลดหน้าเว็บที่ทำ
pagecontainerload ทริกเกอร์หลังหน้าได้รับการโหลดเสร็จเรียบร้อยแล้วและใส่ลงใน DOM
pagecontainerloadfailed เรียกหากคำขอการโหลดหน้าล้มเหลว โดยค่าเริ่มต้นก็จะแสดง "ข้อผิดพลาดการโหลดหน้าเว็บ" ข้อความ

ตัวอย่างด้านล่างนี้แสดงให้เห็นถึงวิธีการที่ pagecontainerload และเหตุการณ์ pagecontainerloadfailed ทำงาน:

ตัวอย่าง

$(document).on("pagecontainerload",function(event,data){
  alert("pageload event fired!\nURL: " + data.url);
});
$(document).on("pagecontainerloadfailed",function(event,data){
  alert("Sorry, requested page does not exist.");
});
ลองตัวเอง»

มือถือ jQuery เหตุการณ์การเปลี่ยน

นอกจากนี้เรายังสามารถใช้สำหรับเหตุการณ์ที่เกิดขึ้นเมื่อเราเปลี่ยนจากหน้าหนึ่งไปยังอีก

การเปลี่ยนหน้าเกี่ยวข้องกับสองหน้า: ก "จาก" หน้าและ "เป็น" หน้า - เปลี่ยนเหล่านี้เคลื่อนไหวเปลี่ยนแปลงจากหน้าใช้งานในปัจจุบัน (fromPage) ไปยังหน้าใหม่ (toPage)

เหตุการณ์ ลักษณะ
pagebeforeshow เปิดขึ้นมาที่ "เป็น" หน้าก่อนภาพเคลื่อนไหวเปลี่ยนแปลงเริ่มต้น
pageshow เปิดขึ้นมาที่ "เป็น" หน้าหลังภาพเคลื่อนไหวเปลี่ยนแปลงเสร็จสมบูรณ์
pagebeforehide เปิดขึ้นมาที่ "จาก" หน้าก่อนที่จะเริ่มต้นการเปลี่ยนแปลงภาพเคลื่อนไหว
pagehide เปิดขึ้นมาที่ "จาก" หน้าหลังภาพเคลื่อนไหวเปลี่ยนแปลงเสร็จสมบูรณ์

ตัวอย่างด้านล่างนี้แสดงให้เห็นว่าเหตุการณ์การเปลี่ยนแปลงการทำงาน:

ตัวอย่าง

$(document).on("pagebeforeshow","#pagetwo",function(){ // When entering pagetwo
  alert("pagetwo is about to be shown");
});
$(document).on("pageshow","#pagetwo",function(){ // When entering pagetwo
  alert("pagetwo is now shown");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // When leaving pagetwo
  alert("pagetwo is about to be hidden");
});
$(document).on("pagehide","#pagetwo",function(){ // When leaving pagetwo
  alert("pagetwo is now hidden");
});
ลองตัวเอง»


❮ก่อนหน้า ถัดไปบท❯