Implementation of screen orientation change and scrolling in JQuery mobile page development

Implementation of screen orientation change and scrolling in JQuery mobile page development_jquery

WBOY

Release： 2016-05-16 15:27:45

Original

1143 people have browsed it

Orientation change event (orientationchange)
This event is triggered when the orientation of the device changes (the device is held horizontally or vertically). When binding this event, your callback function can add a second parameter, which is used to describe the horizontal or vertical attributes of the device, "portrait" or; landscape. These values will also be added to html elements as class values, so that You can change their styles through selectors in css. Note that we now bind the resize event when the browser does not support the orientationChange event.

Executed when the orientation of the handheld device changes

 $(window).bind( 'orientationchange', function(e){
 var height=document.body.clientHeight - 195;
 $("#content").css("min-height",height);
 $("#thumb").css("margin",height/4.2 + "px auto");
 });

Copy after login

The above example is used by me to fill the entire page when the handheld device changes orientation to avoid blank spaces, and can be expanded according to your own needs.

$(function(){
 $('a').click(function(){
 $(window).trigger('orientationchange' );
 });
});

Copy after login

On smartphones and tablet devices, there is only one orientation event named orientationchange. This event is triggered when the device is rotated vertically or horizontally. To determine in which direction the device is rotated, you can access the orientation property, which provides a read-only value portrait or landscape.

Binding to the orientationchange event requires you to position the body element and then use the bind method to bind the event. It's also important to bind the orientationchange event to the body, but wait until the element is ready in the document before binding the event. Otherwise, you will get inconsistent results because the body element may not be available at binding time. You can also enhance this code further to fire the orientationchange event when the document is ready.

The orientationchange event is triggered when the document is ready

<!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);
 });
});

Copy after login

Fires the event when the document is ready, this allows you to determine the orientation of the web page when it initially loads. This is particularly useful when you need to display content using the device's current orientation. You can also access orientation values through CSS as they are added to HTML elements in the web page. These powerful features allow you to modify the layout of your content in the device's orientation.

Scroll events (scrollstart, scrollstop)
scrollstart: Triggered when screen scrolling starts. Apple's devices will freeze DOM operations during scrolling, and execute these DOM operations in a queue when the scrolling ends. We are currently studying methods to allow Apple's devices to perform DOM operations before scrolling begins.

$(document).ready(function(){

 $('body').bind('scrollstart', function(event) {
 // Add scroll start code here
 });

});

Copy after login

scrollstop: triggered when scrolling ends.

$(document).ready(function(){

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

});

Copy after login

<!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>

Copy after login