Événement de changement d'orientation jQuery Mobile

événement de changement d'orientation jQuery Mobile

L'événement de changement d'orientation est déclenché lorsque l'utilisateur fait pivoter l'appareil mobile verticalement ou horizontalement.

Pour utiliser l'événement orientationchange, attachez-le à l'objet window :

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

La fonction de rappel peut avoir un paramètre, un objet événement, qui renvoie l'orientation de l'appareil mobile : "portrait" (l'appareil reste en position verticale) ou "paysage" (l'appareil reste en position horizontale) :

Exemple

<!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>

Exécuter l'instance »

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Puisque l'événement orientationchange est lié à l'objet window, nous pouvons utiliser la propriété window.orientation pour définir différents styles afin de distinguer les vues portrait et paysage :

Exemple

<!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>

Exécuter l'instance »

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

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

Événement de changement d'orientation jQuery Mobile