Implementierung der Änderung der Bildschirmausrichtung und des Scrollens in der mobilen JQuery-Seite development

Implementierung der Änderung der Bildschirmausrichtung und des Scrollens in der mobilen JQuery-Seite development_jquery

WBOY

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

Original

1135 Leute haben es durchsucht

Orientierungsänderungsereignis (Orientierungsänderung)
Dieses Ereignis wird ausgelöst, wenn sich die Ausrichtung des Geräts ändert (das Gerät wird horizontal oder vertikal gehalten). Wenn Sie dieses Ereignis binden, kann Ihre Rückruffunktion einen zweiten Parameter hinzufügen, der zur Beschreibung der horizontalen oder vertikalen Attribute des Geräts verwendet wird: „Hochformat“ oder „Querformat“. Diese Werte werden auch als Klasse zu HTML-Elementen hinzugefügt Werte, damit Sie ihre Stile über Selektoren in CSS ändern können. Beachten Sie, dass wir jetzt das Resize-Ereignis binden, wenn der Browser das OrientationChange-Ereignis nicht unterstützt.

Wird ausgeführt, wenn sich die Ausrichtung des Handgeräts ändert

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

Nach dem Login kopieren

Das obige Beispiel wird von mir verwendet, um die gesamte Seite auszufüllen, wenn das Handheld-Gerät die Ausrichtung ändert, um Leerzeichen zu vermeiden, und kann nach Ihren eigenen Bedürfnissen erweitert werden.

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

Nach dem Login kopieren

Auf Smartphones und Tablet-Geräten gibt es nur ein Orientierungsereignis namens „orientierungsänderung“. Dieses Ereignis wird ausgelöst, wenn das Gerät vertikal oder horizontal gedreht wird. Um zu bestimmen, in welche Richtung das Gerät gedreht wird, können Sie auf die Ausrichtungseigenschaft zugreifen, die einen schreibgeschützten Wert im Hoch- oder Querformat bereitstellt.

Für die Bindung an das Orientierungsänderungsereignis müssen Sie das Körperelement positionieren und dann die Bindungsmethode verwenden, um das Ereignis zu binden. Es ist auch wichtig, das Orientierungsänderungsereignis an den Textkörper zu binden. Warten Sie jedoch, bis das Element im Dokument bereit ist, bevor Sie das Ereignis binden. Andernfalls erhalten Sie inkonsistente Ergebnisse, da das Körperelement zum Bindungszeitpunkt möglicherweise nicht verfügbar ist. Sie können diesen Code auch weiter erweitern, um das Orientierungsänderungsereignis auszulösen, wenn das Dokument fertig ist.

Das Ausrichtungsänderungsereignis wird ausgelöst, wenn das Dokument fertig ist

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

Nach dem Login kopieren

Löst das Ereignis aus, wenn das Dokument fertig ist. Dadurch können Sie die Ausrichtung der Webseite beim ersten Laden bestimmen. Dies ist besonders nützlich, wenn Sie Inhalte in der aktuellen Ausrichtung des Geräts anzeigen müssen. Sie können auch über CSS auf Orientierungswerte zugreifen, wenn diese zu HTML-Elementen auf der Webseite hinzugefügt werden. Mit diesen leistungsstarken Funktionen können Sie das Layout Ihrer Inhalte entsprechend der Ausrichtung des Geräts ändern.

Scroll-Ereignisse (Scrollstart, Scrollstop)
scrollstart: Wird ausgelöst, wenn das Scrollen des Bildschirms beginnt. Apple-Geräte frieren DOM-Vorgänge während des Scrollens ein und führen diese DOM-Vorgänge in einer Warteschlange aus, wenn der Scrollvorgang endet. Wir untersuchen derzeit Methoden, die es Apple-Geräten ermöglichen, DOM-Vorgänge auszuführen, bevor der Scrollvorgang beginnt.

$(document).ready(function(){

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

});

Nach dem Login kopieren

Scrollstop: Wird ausgelöst, wenn das Scrollen endet.

$(document).ready(function(){

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

});

Nach dem Login kopieren

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

Nach dem Login kopieren