jQuery Mobile 方向改變（orientationchange）事件

當(dāng)用戶垂直或水平旋轉(zhuǎn)移動(dòng)設(shè)備時(shí)，觸發(fā)方向改變（orientationchange）事件。





Mobile


如需使用方向改變（orientationchange）事件，請(qǐng)附加它到 window 對(duì)象： 

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

回調(diào)函數(shù)可有一個(gè)參數(shù)，event 對(duì)象，返回移動(dòng)設(shè)備的方向："縱向"（設(shè)備保持在垂直位置）或"橫向"（設(shè)備保持在水平位置）：

實(shí)例 

<!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("方向改變?yōu)? " + 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>請(qǐng)?jiān)囍D(zhuǎn)您的設(shè)備！</p>
    <p><b>注釋?zhuān)?lt;/b>您必須使用移動(dòng)設(shè)備或者移動(dòng)模擬器來(lái)查看該事件的效果。</p>
  </div>

  <div data-role="footer">
    <h1>頁(yè)腳文本</h1>
  </div>
</div> 

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

由于方向改變（orientationchange）事件綁定到 window 對(duì)象，我們可以使用 window.orientation 屬性來(lái)設(shè)置不同的樣式，以便區(qū)分縱向和橫向的視圖：

實(shí)例 

<!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("方向已經(jīng)變?yōu)?portrait!").css({"background-color":"yellow","font-size":"300%"});
    }
    else
    {
      $("p").text("方向已經(jīng)變?yōu)?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>請(qǐng)?jiān)囍D(zhuǎn)您的設(shè)備！</p>
    <p><b>注釋?zhuān)?lt;/b>您必須使用移動(dòng)設(shè)備或者移動(dòng)模擬器來(lái)查看該事件的效果。</p>
  </div>

  <div data-role="footer">
    <h1>頁(yè)腳文本</h1>
  </div>
</div> 

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例


lamp window.orientation 屬性針對(duì)縱向視圖返回 0，針對(duì)橫向視圖返回 90 或 -90。