Implémentation du changement d'orientation de l'écran et du défilement dans la page mobile JQuery development

Implémentation du changement d'orientation de l'écran et du défilement dans la page mobile JQuery development_jquery

WBOY

Libérer： 2016-05-16 15:27:45

original

1118 Les gens l'ont consulté

Événement de changement d'orientation (orientationchange)
Cet événement se déclenche lorsque l'orientation de l'appareil change (l'appareil est tenu horizontalement ou verticalement). Lors de la liaison de cet événement, votre fonction de rappel peut ajouter un deuxième paramètre, qui est utilisé pour décrire les attributs horizontaux ou verticaux de l'appareil, "portrait" ou ; paysage. Ces valeurs seront également ajoutées aux éléments html en tant que classe. valeurs, afin que vous puissiez modifier leurs styles via des sélecteurs en CSS. Notez que nous lions désormais l'événement resize lorsque le navigateur ne prend pas en charge l'événement orientationChange.

Exécuté lorsque l'orientation de l'appareil portable change

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

Copier après la connexion

L'exemple ci-dessus est utilisé par moi pour remplir la page entière lorsque l'appareil portable change d'orientation afin d'éviter les espaces vides et peut être développé en fonction de vos propres besoins.

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

Copier après la connexion

Sur les smartphones et les tablettes, il n'existe qu'un seul événement d'orientation nommé changement d'orientation. Cet événement est déclenché lorsque l'appareil pivote verticalement ou horizontalement. Pour déterminer dans quelle direction l'appareil est tourné, vous pouvez accéder à la propriété d'orientation, qui fournit une valeur en lecture seule portrait ou paysage.

La liaison à l'événement orientationchange nécessite que vous positionniez l'élément body, puis que vous utilisiez la méthode bind pour lier l'événement. Il est également important de lier l'événement orientationchange au corps, mais attendez que l'élément soit prêt dans le document avant de lier l'événement. Sinon, vous obtiendrez des résultats incohérents car l’élément body risque de ne pas être disponible au moment de la liaison. Vous pouvez également améliorer davantage ce code pour déclencher l'événement orientationchange lorsque le document est prêt.

L'événement orientationchange est déclenché lorsque le document est prêt

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

Copier après la connexion

Déclenche l'événement lorsque le document est prêt, cela vous permet de déterminer l'orientation de la page Web lors de son chargement initial. Ceci est particulièrement utile lorsque vous devez afficher du contenu en utilisant l'orientation actuelle de l'appareil. Vous pouvez également accéder aux valeurs d'orientation via CSS lorsqu'elles sont ajoutées aux éléments HTML de la page Web. Ces fonctionnalités puissantes vous permettent de modifier la disposition de votre contenu dans l'orientation de l'appareil.

Événements de défilement (scrollstart, scrollstop)
scrollstart : déclenché lorsque le défilement de l'écran démarre. Les appareils Apple gèleront les opérations DOM pendant le défilement et exécuteront ces opérations DOM dans une file d'attente à la fin du défilement. Nous étudions actuellement des méthodes permettant aux appareils Apple d'effectuer des opérations DOM avant le début du défilement.

$(document).ready(function(){

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

});

Copier après la connexion

scrollstop : déclenché à la fin du défilement.

$(document).ready(function(){

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

});

Copier après la connexion

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

Copier après la connexion