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


Posted in Javascript onDecember 03, 2015

方向改变事件(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>
Javascript 相关文章推荐
javascript 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
探讨javascript是不是面向对象的语言
Nov 21 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 #Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 #Javascript
详解JavaScript对象和数组
Dec 03 #Javascript
java必学必会之static关键字
Dec 03 #Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 #Javascript
继续学习javascript闭包
Dec 03 #Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 #Javascript
You might like
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
给php新手谈谈我的学习心得
2007/02/25 PHP
php中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
轻松实现php文件上传功能
2017/02/17 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
编程用JAVA解析XML的方式
2013/07/07 面试题
Ejb技术面试题
2015/04/29 面试题
房屋公证委托书
2014/04/03 职场文书
法定授权委托证明书
2014/09/27 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
订货会主持词
2015/07/01 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
Python基于百度AI实现抓取表情包
2021/06/27 Python
分享3个非常实用的 Python 模块
2022/03/03 Python