×
jQuery Mobile 教程jQuery Mobile 简介jQuery Mobile 安装jQuery Mobile 页面jQuery Mobile 页面切换jQuery Mobile 按钮jQuery Mobile 按钮图标jQuery Mobile 工具栏jQuery Mobile 导航栏jQuery Mobile 可折叠块jQuery Mobile 表格jQuery Mobile 网格

jQuery Mobile 列表

jQuery Mobile 列表视图jQuery Mobile 列表内容

jQuery Mobile 表单

jQuery Mobile 表单基础jQuery Mobile 表单输入jQuery Mobile 表单选择jQuery Mobile 表单滑动条

jQuery Mobile 主题

jQuery Mobile 主题

jQuery Mobile 事件

jQuery Mobile 事件jQuery Mobile 触摸事件jQuery Mobile 滚屏事件jQuery Mobile 方向改变事件jQuery Mobile 实例jQuery Mobile Data 属性jQuery Mobile 图标jQuery Mobile 事件jQuery Mobile页面事件jQuery Mobile CSS 类

jQuery Mobile 方向改变事件


jQuery Mobile 方向改变(orientationchange)事件

当用户垂直或水平旋转移动设备时,触发方向改变(orientationchange)事件。





Mobile


如需使用方向改变(orientationchange)事件,请附加它到 window 对象:

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

回调函数可有一个参数,event 对象,返回移动设备的方向:"纵向"(设备保持在垂直位置)或"横向"(设备保持在水平位置):

实例

$(window).on("orientationchange",function(event){
alert("方向是: " + event.orientation);
});

尝试一下 »

由于方向改变(orientationchange)事件绑定到 window 对象,我们可以使用 window.orientation 属性来设置不同的样式,以便区分纵向和横向的视图:

实例

$(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%"});
}
});

尝试一下 »

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

分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)