在现在的智能手机中,都有对方向变换的自动感知功能,比如当手机方向从水平方向切换到垂直方向时,则会触发该事件。在jQuery Mobile中,可以通过orientationchange事件进行绑定,并且可以设定是垂直方向还是水平方向,如下代码所示:

  $(document).ready(function(){

  $('body').bind('orientationchange', function(event) {

  alert('orientationchange: '+ event.orientation);

  });

  });

  在上面的代码中,通过对body元素绑定orientationchange事件,并显示出当前的orientation属性。但要注意的是,即使在DOM加载完后,还是应该重新调用该事件,因为在DOM加载时有时可能orientationchange事件还没能完全加载完毕,所以应该按如下的方法在ready加载后,再加载一次:

  $(document).ready(function(){

  $('body').bind('orientationchange', function(event) {

  alert('orientationchange: '+ event.orientation);

  });

  $('body').trigger('orientationchange');

  });

jQuery Mobile方向感应事件的更多相关文章

  1. JQuery Mobile - 为什么绑定事件后会被多次执行?

    JQuery Mobile 在绑定事件时候,发现会被多次执行,为什么啊? 原来,jquery click  不是替换原有的function ,而是接着添加,所以才会执行次数越来越多,怎么办才能按需实现 ...

  2. jQuery Mobile 入门基础教程

    jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...

  3. [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

  4. jquery mobile 对手势触控提供了如下几个事件监听:

    jquery mobile 对手势触控提供了如下几个事件监听: 复制代码代码如下: tap  当用户点屏幕时触发taphold 当用户点屏幕且保持触摸超过1秒时触发swipe 当页面被垂直或者水平拖动 ...

  5. jQuery Mobile里xxx怎么用呀? (事件篇)

    jQuery Mobile里$(document).ready()怎么用呀? 相关链接: http://stackoverflow.com/questions/14468659/jquery-mobi ...

  6. jquery mobile Touch事件

    Touch事件在用户触摸屏幕(页面)时触发 1.jquery mobile tap tap事件在用户敲击某个元素时触发 $("p").on("tap",fucn ...

  7. jQuery Mobile Api

        jQuery Mobile提供了使用Javascript与框架(html5)通信以及进行内容管理的API.下面介绍具体事件. 文档事件     mobileinit事件会在jQuery Mob ...

  8. jQuery Mobile Data 属性

    按钮 带有 data-role="button" 的超链接.button 元素.工具栏中的链接以及 input 字段都会自动渲染成按钮样式,不需要添加 data-role=&quo ...

  9. jQuery Mobile 所有data-*选项,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) jQuery Mobile事件全解 jQuery Mobile 所有class选项 jQuery Mobile 所有data-*选项 jQuery Mobile 所 ...

随机推荐

  1. 使用flask的时候遇到的问题及其解答

    在网上看到了mircoblog的这个web程序,用flask框架写的,自己就在windows的环境下实现了下. 1.这个博客系统用到了一个flask插件叫flask_Login 里面涉及到编码解码的问 ...

  2. ANDROID_MARS学习笔记_S01原始版_018_SERVICE之Parcel

    一.代码 1.xml(1)activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk ...

  3. Altium Designer学习: 允许闭合回路

    使用AltiumDesigner画PCB时,顶层和底层都有电源线走 但是通过过孔链接的,主要是因为我这里可使用了几个相同的电源接口,把这些上下层的电源接口连在一起就很容易画出闭合回路,这自身没有太大的 ...

  4. RPGJS 进阶分析之 如何使用RMXP导出的数据

    首先启动RMXP 在主脚本编辑区粘贴官方提供的导出数据脚本. 之后启动并进入游戏之后按F8键就可以调出导出Map和Animation的菜单 导出后的数据保存在工程目录下的RpgJs目录下. Datab ...

  5. Form.KeyPreview 属性

    Form.KeyPreview 属性 今天再做KeyDown 和 KeyUp 事件时,就是忘了设置,窗体的KeyPreview 属性,所以KeyDown 和 KeyUp 事件没有反应(这里说明一下,本 ...

  6. C#排序算法的比较

    首先通过图表比较不同排序算法的时间复杂度和稳定性. 排序方法 平均时间 最坏情况 最好情况 辅助空间 稳定性 直接插入排序 O(n2) O(n2) O(n) O(1) 是 冒泡排序 O(n2) O(n ...

  7. BZOJ2348: [Baltic 2011]Plagiarism

    2348: [Baltic 2011]Plagiarism Time Limit: 1 Sec  Memory Limit: 256 MBSubmit: 304  Solved: 141[Submit ...

  8. NOI2014 动物园

    3670: [Noi2014]动物园 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 174  Solved: 92[Submit][Status] D ...

  9. puppy 制作linux

    经过一段时间的使用以后,我们每个人电脑里的Puppy Linux都是独一无二的,我们可以通过简单的方法将自己电脑上的Puppy制作成iso或Live-CD,成为自己玩的“Only You”Puppy ...

  10. [NYOJ 43] 24 Point game

    24 Point game 时间限制:3000 ms  |  内存限制:65535 KB 难度:5   描述 There is a game which is called 24 Point game ...