JQuery 모바일 페이지 development_jquery에서 화면 방향 변경 및 스크롤 구현-JS 튜토리얼-php.cn

JQuery 모바일 페이지 development_jquery에서 화면 방향 변경 및 스크롤 구현

WBOY

풀어 주다： 2016-05-16 15:27:45

원래의

1135명이 탐색했습니다.

오리엔테이션 변경 이벤트(orientationchange)
이 이벤트는 기기의 방향이 변경될 때(기기를 수평 또는 수직으로 잡으면) 트리거됩니다. 이 이벤트를 바인딩할 때 콜백 함수는 장치의 수평 또는 수직 속성인 "세로"를 설명하는 데 사용되는 두 번째 매개변수를 추가할 수 있습니다. 또는 이러한 값은 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 이벤트에 바인딩하려면 body 요소를 배치한 다음 바인딩 메서드를 사용하여 이벤트를 바인딩해야 합니다. 방향 변경 이벤트를 본문에 바인딩하는 것도 중요하지만 이벤트를 바인딩하기 전에 문서에서 요소가 준비될 때까지 기다립니다. 그렇지 않으면 바인딩 시 본문 요소를 사용하지 못할 수 있으므로 일관되지 않은 결과를 얻게 됩니다. 문서가 준비되면 방향 변경 이벤트를 실행하도록 이 코드를 더욱 향상시킬 수도 있습니다.

문서가 준비되면 방향 변경 이벤트가 트리거됩니다

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

로그인 후 복사

문서가 준비되면 이벤트를 실행합니다. 이를 통해 웹 페이지가 처음 로드될 때 웹 페이지의 방향을 결정할 수 있습니다. 이는 장치의 현재 방향을 사용하여 콘텐츠를 표시해야 할 때 특히 유용합니다. 웹 페이지의 HTML 요소에 추가되는 방향 값에 CSS를 통해 액세스할 수도 있습니다. 이러한 강력한 기능을 사용하면 장치 방향에 따라 콘텐츠 레이아웃을 수정할 수 있습니다.

스크롤 이벤트(스크롤 시작, 스크롤 중지)
scrollstart: 화면 스크롤이 시작될 때 트리거됩니다. Apple의 장치는 스크롤하는 동안 DOM 작업을 정지하고 스크롤이 끝나면 대기열에서 이러한 DOM 작업을 실행합니다. 우리는 현재 스크롤이 시작되기 전에 Apple의 장치가 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>

로그인 후 복사