JQuery移动页面开发之屏幕方向改变与滚屏的实现

方向改变事件(orientationchange)
当设备的方向变化(设备横向持或纵向持)此事件被触发。绑定此事件时,你的回调函数可以加入第二个参数,作用为描述设备横或纵向的属性,"portrait"或;landscape"。这些值也会作为class值加入到html的元素中,使你可以通过css中的选择器改变他们的样式。注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。

手持设备方向改变时执行

$(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> <title>Understanding the jQuery Mobile API</title> <link href="https://www.jb51.net/jquery.mobile.css" /> <script src="https://www.jb51.net/jquery.js"></script> <script type="text/java script"> $(document).ready(function(){ $(".tap-hold-test").bind("taphold", function(event) { $(this).html("Tapped and held"); }); }); </script> <script src="https://www.jb51.net/jquery.mobile.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <ul data-role="listview"> <li>Tap and hold test</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) { // Add scroll start code here }); });

scrollstop:滚屏结束时触发。

$(document).ready(function(){ $('body').bind('scrollstop', function(event) { // Add scroll stop code here }); });

<!DOCTYPE html> <html> <head> <title>Ajax测试</title> <meta charset="gbk"> <meta content="width=device-width, initial-scale=1"> <link href="https://www.jb51.net/jquery-mobile/jquery.mobile-1.2.0.min.css"/> <link href="https://www.jb51.net/jquery-mobile/jquery.mobile.structure-1.2.0.min.css"/> <script src="https://www.jb51.net/jquery-mobile/jquery-1.8.2.min.js"></script> <script src="https://www.jb51.net/jquery-mobile/jquery.mobile-1.2.0.min.js"></script> </head> <body> <div data-role="page" data-theme="b"> <div data-role="header"></div> <div data-role="content"> <script> //scrollstart事件 function scrollstartFunc(evt) { try { var target = $(evt.target); while (target.attr("id") == undefined) { target = target.parent(); } //获取触点目标id属性值 var targetId = target.attr("id"); alert("targetId: " + targetId); } catch (e) { alert('myscrollfunc:' + e.message); } } function myinit() { //绑定上下滑动事件 $("#myul").bind('scrollstart', function () { scrollstartFunc(event); }); } window.onload = myinit; </script> <!-- listview测试 --> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">信息列表</li> <li data-role="fieldcontain">信息1</li> <li data-role="fieldcontain">信息2</li> <li data-role="fieldcontain">信息3</li> <li data-role="fieldcontain">信息4</li> <li data-role="fieldcontain">信息5</li> <li data-role="fieldcontain">信息6</li> <li data-role="fieldcontain">信息7</li> <li data-role="fieldcontain">信息8</li> <li data-role="fieldcontain">信息9</li> <li data-role="fieldcontain">信息10</li> </ul> </div> </body> </html>

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgzzgg.html