注冊成功
X
W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗(yàn)值獎勵
jQuery Mobile 方向改變事件
2018-02-03 16:38 更新
jQuery Mobile 方向改變事件
當(dāng)設(shè)備的方向變化（設(shè)備橫向持或縱向持）時，將觸發(fā)jQuery Mobile方向改變事件。
jQuery Mobile 方向改變（orientationchange）事件
當(dāng)用戶垂直或水平旋轉(zhuǎn)移動設(shè)備時，觸發(fā)方向改變（orientationchange）事件。
如需使用方向改變（orientationchange）事件，請附加它到 window 對象：
$(window).on("orientationchange",function(){
alert("The orientation has changed!");
});
alert("The orientation has changed!");
});
回調(diào)函數(shù)可有一個參數(shù)，event 對象，返回移動設(shè)備的方向："縱向"（設(shè)備保持在垂直位置）或"橫向"（設(shè)備保持在水平位置）：
實(shí)例
$(window).on("orientationchange",function(event){
alert("Orientation is: " + event.orientation);
});
alert("Orientation is: " + event.orientation);
});
嘗試一下 ?
由于方向改變（orientationchange）事件綁定到 window 對象，我們可以使用 window.orientation 屬性來設(shè)置不同的樣式，以便區(qū)分縱向和橫向的視圖：
實(shí)例
$(window).on("orientationchange",function(){
if(window.orientation == 0) // Portrait
{
$("p").css({"background-color":"yellow","font-size":"300%"});
}
else // Landscape
{
$("p").css({"background-color":"pink","font-size":"200%"});
}
});
if(window.orientation == 0) // Portrait
{
$("p").css({"background-color":"yellow","font-size":"300%"});
}
else // Landscape
{
$("p").css({"background-color":"pink","font-size":"200%"});
}
});
嘗試一下 ?
 | window.orientation 屬性針對縱向視圖返回 0，針對橫向視圖返回 90 或 -90。 |
|---|
注意：當(dāng)瀏覽器不支持orientationChange事件的時候綁定resize事件。
在下一節(jié)內(nèi)容中，我們將介紹jQuery Mobile頁面事件！
以上內(nèi)容是否對您有幫助：
在文檔使用的過程中是否遇到以下問題：
- 內(nèi)容錯誤
- 更新不及時
- 鏈接錯誤
- 缺少代碼/圖片示列
- 太簡單/步驟待完善
- 其他
精選筆記
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話：173-0602-2364|舉報郵箱：jubao@eeedong.com
更多建議：