Jquery Mobile 方向改变事件(orientationchange)
作者:本站编辑 发布时间:2014-11-25 来源:本站原创
点击数:
手持设备方向改变时执行
$(window).bind( 'orientationchange', function(e){
var height=document.body.clientHeight - 195;
$("#content").css("min-height",height);
$("#thumb").css("margin",height/4.2 + "px auto");
});
以上示例是本人用于在手持设备改变方向时填充整个页面，避免出现空白，可以根据自己的需求扩展。
$(function(){
$('a').click(function(){
$(window).trigger('orientationchange' );
});
});在智能手机和平板设备上，只有一个名称为orientationchange 的方向事件。该事件在设备被垂直或水平旋转时触发。要确定设备按哪个方向旋转，您可以访问方向属性，它提供一个只读值portrait 或 landscape。
绑定到 orientationchange 事件要求您定位 body 元素，然后使用 bind 方法来绑定事件。将orientationchange 事件绑定到body，但是要等待元素在文档就绪后，再绑定事件，这也很重要。否则，您会获得不一致的结果，因为body 元素可能在绑定时不可用。您也可以进一步增强该代码，当文档就绪时触发orientationchange 事件。
当文档就绪时触发orientationchange 事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<meta name="viewport" content="width=device-width" />
<link href="css/jquery.mobile.structure-1.3.2.css" rel="stylesheet" type="text/css"/>
<link href="css/jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).bind( 'orientationchange', function(e){
var height=document.body.clientHeight - 195;
$("#content").css("height",height);
$("#thumb").css("margin",height/4.2 + "px auto");
});
/*
$(document).ready(function(){
$('body').bind('orientationchange', function(event) {
alert('orientationchange: '+ event.orientation);
});
});
*/
</script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="my-page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content" id="#content" style="background:red;">
<div class="#thumb" style="background:yellow; width:100px; height:100px;">
</div>
orientationchange
</div>
</div>
</body>
</html>
当文档就绪时触发事件，这使您可以确定 Web 页面初始加载时的方向。当您需要 在用设备的当前方向显示内容时，这特别有用。您也可以通过CSS 访问方向值，因为它们被添加到 Web 页面中的 HTML 元素。这些强大的特性使您可以 设备的方向修改内容布局。