เหตุการณ์ทิศทางของ jQuery Mobile

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

เหตุการณ์ orientationchange จะถูกกระตุ้นขณะที่ผู้ใช้หมุนอุปกรณ์เคลื่อนที่ทั้งตัวตรงและตัวตั้ง:

มอบบนโดยแบบจำลอง

มอบบนโดยแบบจำลอง

ถ้าต้องการใช้เหตุการณ์ orientationchange โปรดเพิ่มมันไปที่อ็อบเจ็กต์ window:

$(window).on("orientationchange",function(){
  alert("ทิศทางได้เปลี่ยนแปลง!");
});

ฟังก์ชัน callback สามารถตั้งค่าตัวแปรเพิ่มเติม คือ อ็อบเจ็กต์ event ซึ่งจะกลับค่าทิศทางของอุปกรณ์เคลื่อนที่："portrait" (ทิศทางที่เคลื่อนที่ถูกรักษาเป็นตัวตรง) หรือ "landscape" (ทิศทางที่เคลื่อนที่ถูกรักษาเป็นตัวตั้ง):

ตัวอย่าง

$(window).on("orientationchange",function(event){
  alert("ทิศทางคือ：" + event.orientation);
});

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

เนื่องจากเหตุการณ์ orientationchange ต่อเชื่อมต่อกับอ็อบเจ็กต์ window พวกเราสามารถใช้ตัวแปร window.orientation ได้ เช่น ตั้งรูปแบบต่างกันเพื่อแยกเวอร์ชัน portrait และ landscape ได้:

ตัวอย่าง

$(window).on("orientationchange",function(){
  if(window.orientation == 0) // ภาพรวม
  {
    $("p").css({"background-color":"yellow","font-size":"300%"});
  }
  else // Landscape
  {
    $("p").css({"background-color":"pink","font-size":"200%"});
  }
});

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

คำแนะนำ:window.orientation ในโหมด portrait กลับมา 0 ในโหมด landscape กลับมา 90 หรือ -90。