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

前端技术 2023/08/08 JavaScript

方向改变事件(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 rel=\"stylesheet\" href=\"jquery.mobile.css\" />
<script src=\"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=\"jquery.mobile.js\"></script>
</head>
<body>
<div data-role=\"page\" id=\"my-page\">
<div data-role=\"header\">
<h1>Header</h1>
</div>
<div data-role=\"content\">
<ul data-role=\"listview\" id=\"my-list\">
<li class=\"tap-hold-test\">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 name=\"viewport\" content=\"width=device-width, initial-scale=1\">
  <link rel=\"stylesheet\" href=\"jquery-mobile/jquery.mobile-1.2.0.min.css\"/>
  <link rel=\"stylesheet\" href=\"jquery-mobile/jquery.mobile.structure-1.2.0.min.css\"/>
  <script src=\"jquery-mobile/jquery-1.8.2.min.js\"></script>
  <script src=\"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 id=\"myul\" data-role=\"listview\" data-inset=\"true\">
 <li data-role=\"list-divider\">信息列表</li>
 <li id=\"li1\" data-role=\"fieldcontain\">信息1</li>
 <li id=\"li2\" data-role=\"fieldcontain\">信息2</li>
 <li id=\"li3\" data-role=\"fieldcontain\">信息3</li>
 <li id=\"li4\" data-role=\"fieldcontain\">信息4</li>
 <li id=\"li5\" data-role=\"fieldcontain\">信息5</li>
 <li id=\"li6\" data-role=\"fieldcontain\">信息6</li>
 <li id=\"li7\" data-role=\"fieldcontain\">信息7</li>
 <li id=\"li8\" data-role=\"fieldcontain\">信息8</li>
 <li id=\"li9\" data-role=\"fieldcontain\">信息9</li>
 <li id=\"li10\" data-role=\"fieldcontain\">信息10</li>
 </ul>
  </div>
 </body>
</html>

本文地址：https://www.stayed.cn/item/591

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案