Acara perubahan orientasi mudah alih jQuery

Peristiwa perubahan orientasi dicetuskan apabila pengguna memutar peranti mudah alih secara menegak atau mendatar.

Untuk menggunakan peristiwa orientationchange, lampirkannya pada objek tetingkap:

$(window).on("orientationchange",function(){
	alert("方向有改变!");
});

Fungsi panggil balik boleh mempunyai satu parameter, objek acara, yang mengembalikan orientasi peranti mudah alih: "potret" (peranti kekal dalam kedudukan menegak) atau "landskap" (peranti kekal dalam kedudukan mendatar):

Contoh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate",function(event){
  $(window).on("orientationchange",function(event){
    alert("方向改变为: " + event.orientation);
  });                     
});
</script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>orientationchange 事件</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>请试着旋转您的设备！</p>
    <p><b>注释：</b>您必须使用移动设备或者移动模拟器来查看该事件的效果。</p>
  </div>

  <div data-role="footer">
    <h1>页脚文本</h1>
  </div>
</div> 

</body>
</html>

Jalankan instance »

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Memandangkan peristiwa orientationchange terikat pada objek tetingkap, kita boleh menggunakan sifat window.orientation untuk menetapkan gaya yang berbeza untuk membezakan antara paparan potret dan landskap:

Contoh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate",function(event){
  $(window).on("orientationchange",function(){
    if(window.orientation == 0)
    {
      $("p").text("方向已经变为 portrait!").css({"background-color":"yellow","font-size":"300%"});
    }
    else
    {
      $("p").text("方向已经变为 landscape!").css({"background-color":"pink","font-size":"200%"});
    }
  });                   
});
</script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1> orientationchange 事件</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>请试着旋转您的设备！</p>
    <p><b>注释：</b>您必须使用移动设备或者移动模拟器来查看该事件的效果。</p>
  </div>

  <div data-role="footer">
    <h1>页脚文本</h1>
  </div>
</div> 

</body>
</html>

Jalankan instance »

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

	window.orientation 属性针对纵向视图返回 0，针对横向视图返回 90 或 -90。

Acara perubahan orientasi mudah alih jQuery