PhoneGap中文网

 找回密码
 立即注册
查看: 15977|回复: 6

Jquery Mobile 方向改变事件(orientationchange)

[复制链接]

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
发表于 2013-8-8 19:31:38 | 显示全部楼层 |阅读模式
        当设备的方向变化(设备横向持或纵向持)此事件被触发。绑定此事件时,你的回调函数可以加入第二个参数,作用为描述设备横或纵向的属性,"portrait"或;landscape"。这些值也会作为class值加入到html的元素中,使你可以通过css中的选择器改变他们的样式。注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。

    手持设备方向改变时执行
  1. $(window).bind( 'orientationchange', function(e){
  2.         var height=document.body.clientHeight - 195;
  3.         $("#content").css("min-height",height);
  4.         $("#thumb").css("margin",height/4.2 + "px auto");
  5.         });
复制代码
    以上示例是本人用于在手持设备改变方向时填充整个页面,避免出现空白,可以根据自己的需求扩展。
  1.   $(function(){
  2.       $('a').click(function(){
  3.         $(window).trigger('orientationchange' );
  4.       });
  5.     });
复制代码
在智能手机和平板设备上,只有一个名称为orientationchange 的方向事件。该事件在设备被垂直或水平旋转时触发。要确定设备按哪个方向旋转,您可以访问方向属性,它提供一个只读值portrait 或 landscape。

       绑定到 orientationchange 事件要求您定位 body 元素,然后使用 bind 方法来绑定事件。将orientationchange 事件绑定到body,但是要等待元素在文档就绪后,再绑定事件,这也很重要。否则,您会获得不一致的结果,因为body 元素可能在绑定时不可用。您也可以进一步增强该代码,当文档就绪时触发orientationchange 事件。

    当文档就绪时触发orientationchange 事件
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>jQuery Mobile Web 应用程序</title>
  6. <meta name="viewport" content="width=device-width" />
  7. <link href="css/jquery.mobile.structure-1.3.2.css" rel="stylesheet" type="text/css"/>
  8. <link href="css/jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
  9. <script src="js/jquery.js" type="text/javascript"></script>
  10. <script type="text/javascript">
  11.    $(window).bind( 'orientationchange', function(e){
  12.         var height=document.body.clientHeight - 195;
  13.         $("#content").css("height",height);
  14.         $("#thumb").css("margin",height/4.2 + "px auto");
  15.     });
  16. /*
  17.     $(document).ready(function(){
  18.         $('body').bind('orientationchange', function(event) {
  19.           alert('orientationchange: '+ event.orientation);
  20.         });
  21.     });
  22. */
  23. </script>

  24. <script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>

  25. </head>
  26. <body>
  27.     <div data-role="page" id="my-page">
  28.         <div data-role="header">
  29.         <h1>Header</h1>
  30.         </div>
  31.         <div data-role="content" id="#content" style="background:red;">
  32.             <div class="#thumb" style="background:yellow; width:100px; height:100px;">

  33.             </div>
  34.             orientationchange
  35.         </div>
  36.     </div>
  37.    </body>
  38. </html>

复制代码
当文档就绪时触发事件,这使您可以确定 Web 页面初始加载时的方向。当您需要 在用设备的当前方向显示内容时,这特别有用。您也可以通过CSS 访问方向值,因为它们被添加到 Web 页面中的 HTML 元素。这些强大的特性使您可以 设备的方向修改内容布局。


it营
回复

使用道具 举报

6

主题

176

帖子

198

积分

注册会员

Rank: 2

积分
198
发表于 2013-9-28 01:28:41 | 显示全部楼层
帮帮顶顶!!
it营
回复 支持 反对

使用道具 举报

6

主题

176

帖子

198

积分

注册会员

Rank: 2

积分
198
发表于 2013-10-1 19:26:44 | 显示全部楼层
相当不错,感谢无私分享精神!
回复 支持 反对

使用道具 举报

23

主题

141

帖子

260

积分

中级会员

Rank: 3Rank: 3

积分
260
发表于 2013-10-4 07:12:46 | 显示全部楼层
正在学习中 谢谢楼主了 非常支持 开源
回复 支持 反对

使用道具 举报

6

主题

176

帖子

198

积分

注册会员

Rank: 2

积分
198
发表于 2013-10-5 21:26:50 | 显示全部楼层
真是 收益 匪浅
回复 支持 反对

使用道具 举报

23

主题

141

帖子

260

积分

中级会员

Rank: 3Rank: 3

积分
260
发表于 2013-10-7 11:59:57 | 显示全部楼层
有竞争才有进步嘛
回复 支持 反对

使用道具 举报

6

主题

176

帖子

198

积分

注册会员

Rank: 2

积分
198
发表于 2013-10-9 03:43:26 | 显示全部楼层
非常感谢楼主。。。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-3-29 09:23 , Processed in 0.050543 second(s), 32 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表