JQuery 모바일 페이지 development_jquery에서 화면 방향 변경 및 스크롤 구현
- WBOY원래의
- 2016-05-16 15:27:451136검색
오리엔테이션 변경 이벤트(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);
});
});
스크롤 이벤트(스크롤 시작, 스크롤 중지)
scrollstart: 화면 스크롤이 시작될 때 트리거됩니다. Apple의 장치는 스크롤하는 동안 DOM 작업을 정지하고 스크롤이 끝나면 대기열에서 이러한 DOM 작업을 실행합니다. 우리는 현재 스크롤이 시작되기 전에 Apple의 장치가 DOM 작업을 수행할 수 있도록 하는 방법을 연구하고 있습니다.
$(document).ready(function(){
$('body').bind('scrollstart', function(event) {
// Add scroll start code here
});
});
$(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>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.