JQuery移动页面开发之屏幕方向改变与滚屏的实现
方向改变事件(orientationchange)
当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，你的回调函数可以加入第二个参数，作用为描述设备横或纵向的属性，"portrait"或;landscape"。这些值也会作为class值加入到html的元素中，使你可以通过css中的选择器改变他们的样式。注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize事件。
手持设备方向改变时执行
$(window).bind('orientationchange',function(e){
varheight=document.body.clientHeight-195;
$("#content").css("min-height",height);
$("#thumb").css("margin",height/4.2+"pxauto");
});
以上示例是本人用于在手持设备改变方向时填充整个页面，避免出现空白，可以根据自己的需求扩展。
$(function(){
$('a').click(function(){
$(window).trigger('orientationchange');
});
});
在智能手机和平板设备上，只有一个名称为orientationchange的方向事件。该事件在设备被垂直或水平旋转时触发。要确定设备按哪个方向旋转，您可以访问方向属性，它提供一个只读值portrait或landscape。
绑定到orientationchange事件要求您定位body元素，然后使用bind方法来绑定事件。将orientationchange事件绑定到body，但是要等待元素在文档就绪后，再绑定事件，这也很重要。否则，您会获得不一致的结果，因为body元素可能在绑定时不可用。您也可以进一步增强该代码，当文档就绪时触发orientationchange事件。
当文档就绪时触发orientationchange事件
<!DOCTYPEHTML>
<html>
<head>
<title>UnderstandingthejQueryMobileAPI</title>
<linkrel="stylesheet"href="jquery.mobile.css"/>
<scriptsrc="jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$(".tap-hold-test").bind("taphold",function(event){
$(this).html("Tappedandheld");
});
});
</script>
<scriptsrc="jquery.mobile.js"></script>
</head>
<body>
<divdata-role="page"id="my-page">
<divdata-role="header">
<h1>Header</h1>
</div>
<divdata-role="content">
<uldata-role="listview"id="my-list">
<liclass="tap-hold-test">Tapandholdtest</li>
</ul>
</div>
</div>
</body>
</html>
$(document).ready(function(){
$('body').bind('orientationchange',function(event){
alert('orientationchange:'+event.orientation);
});
});
当文档就绪时触发事件，这使您可以确定Web页面初始加载时的方向。当您需要在用设备的当前方向显示内容时，这特别有用。您也可以通过CSS访问方向值，因为它们被添加到Web页面中的HTML元素。这些强大的特性使您可以设备的方向修改内容布局。
滚屏事件(scrollstart、scrollstop)
scrollstart：当屏幕滚动开始的时候触发。苹果的设备会在滚屏时冻结DOM的操作，当滚屏结束时按队列执行这些dom操作，我们现在正在研究方法让苹果的设备在滚屏开始前执行dom操作。
$(document).ready(function(){
$('body').bind('scrollstart',function(event){
//Addscrollstartcodehere
});
});
scrollstop：滚屏结束时触发。
$(document).ready(function(){
$('body').bind('scrollstop',function(event){
//Addscrollstopcodehere
});
});
<!DOCTYPEhtml>
<html>
<head>
<title>Ajax测试</title>
<metacharset="gbk">
<metaname="viewport"content="width=device-width,initial-scale=1">
<linkrel="stylesheet"href="jquery-mobile/jquery.mobile-1.2.0.min.css"/>
<linkrel="stylesheet"href="jquery-mobile/jquery.mobile.structure-1.2.0.min.css"/>
<scriptsrc="jquery-mobile/jquery-1.8.2.min.js"></script>
<scriptsrc="jquery-mobile/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<divdata-role="page"data-theme="b">
<divdata-role="header"></div>
<divdata-role="content">
<script>
//scrollstart事件
functionscrollstartFunc(evt){
try
{
vartarget=$(evt.target);
while(target.attr("id")==undefined){
target=target.parent();
}
//获取触点目标id属性值
vartargetId=target.attr("id");
alert("targetId:"+targetId);
}
catch(e){
alert('myscrollfunc：'+e.message);
}
}
functionmyinit(){
//绑定上下滑动事件
$("#myul").bind('scrollstart',function(){scrollstartFunc(event);});
}
window.onload=myinit;
</script>
<!--listview测试-->
<ulid="myul"data-role="listview"data-inset="true">
<lidata-role="list-divider">信息列表</li>
<liid="li1"data-role="fieldcontain">信息1</li>
<liid="li2"data-role="fieldcontain">信息2</li>
<liid="li3"data-role="fieldcontain">信息3</li>
<liid="li4"data-role="fieldcontain">信息4</li>
<liid="li5"data-role="fieldcontain">信息5</li>
<liid="li6"data-role="fieldcontain">信息6</li>
<liid="li7"data-role="fieldcontain">信息7</li>
<liid="li8"data-role="fieldcontain">信息8</li>
<liid="li9"data-role="fieldcontain">信息9</li>
<liid="li10"data-role="fieldcontain">信息10</li>
</ul>
</div>
</body>
</html>