jQuery Mobile orientationchange 事件
来源:互联网 发布:淘宝开店找货源 编辑:程序博客网 时间:2024/06/06 03:29
本文转自:http://www.runoob.com/jquerymobile/event-orientationchange.html
在用户翻转移动设备室弹出一些文字信息:
$(window).on("orientationchange",function(){ alert("方向已改变!");});
定义和用法
orientationchange 事件是在用户水平或者垂直翻转设备(即方向发生变化)时触发的事件。
注意:如果要查看 orientationchange 事件的效果, 用户必须使用移动设备或者移动模拟器来查看本站实例。
语法
$(window).on("orientationchange",function(event){...})
要确定设备按哪个方向旋转,您可以访问方向属性 orientation ,属性值可以是 "portrait(纵向)" 或者 "landscape(横向)"。
- Portrait = 设备在纵向位置旋转
- Landscape = 设备在横向位置旋转
实例
(1)事件对象
使用 event.orientation 返回移动设备的方向。
<!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>
(2)窗口对象
使用 window.orientation 属性设置"portrait(纵向)" 和 "landscape(横向)"间不同的样式。
<pre name="code" class="html"><!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>
0 0
- jQuery Mobile orientationchange 事件
- 事件 orientationchange
- 【Jquery mobile】事件
- jquery mobile中的事件
- jQuery mobile 事件 swipe
- JQuery Mobile事件详解
- jQuery Mobile 基础事件
- jQuery Mobile 页面事件
- jquery mobile中的事件
- JS-jquery mobile事件
- jQuery Mobile中的事件
- jQuery Mobile 事件
- jquery mobile mobileinit事件
- jQuery Mobile 触摸事件
- jQuery Mobile 页面事件
- jQuery Mobile教程:jQuery Mobile基本事件
- jQuery Mobile基础12----jQuery Mobile 事件(常用事件
- jQuery Mobile的API事件
- FAQ 常见问题 -【Dr.Elephant系列文章-8】
- 对 Android 开发者有益的 40 条优化建议
- 算法学习过程
- PHP接口数据的封装XML和JSON
- android基础总结篇之七:ContentProvider之读写短消息
- jQuery Mobile orientationchange 事件
- 查询mysql的QPS
- Java多线程编程7--拾遗增补--线程组
- Snmp学习总结(二)——SNMP4J介绍
- RatingBar
- iOS备忘录之开发经验总结
- UIView与CALayer
- scanf 用法及陷阱(转)
- 值得收藏的英语名言大全