<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>제이쿼리 모바일 연습</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<style>
#touchArea {
height:100px;
text-align:center;
line-height:100px;
background:yellow;
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
window.addEventListener('load', function(){
document.body.style.height = (document.documentElement.clientHeight + 100) + 'px';
window.scrollTo(0, 1);
}, false);
$(function(){
$("#btn").on("tap click taphold", function(event){
$("#div1").append("firstPg > "+event.type+ "이벤트 발생함<br/>");
});
$("#touchArea").on("tap", function(event){
$("#div2").append("secondPg > "+event.type+ "이벤트 발생함<br/>");
});
$(document).on("click tap taphold","#imgbtn", function(event){
$("#div3").append("thirdPg > "+event.type+ "이벤트 발생함<br/>");
});
});
</script>
<!-- 터치 이벤트
tap : 화면을 한번 터치할 경우에 발생
taphold : 화면을 오래 누르고 있으면 발생
swipe : 화면을 손가락으로 슬라이딩 할 경우에 발생
.swipe - 슬라이드 방향에 상관없이 발생
.swipeLeft - 화면을 왼쪽으로 슬라이드 할 경우에만 발생
.swipeRight- 화면을 오른쪽으로 슬라이드 할 경우에만 발생
* swipe이벤트는 좌우로 슬라이드 할 경우에만 해당된다.
상하로 슬라이드 할 경우에는 발생하지 않는다.
-->
</head>
<body>
<div data-role="page" id="firstPg">
<div data-role="header" data-position="fixed" id="header">
<h3>터치 이벤트</h3>
</div><!-- header -->
<div role="main" class="ui-content">
<p>tap</p>
<button id="btn">여기를 누르세요...</button>
<a data-role="button" href="#secondPg">두번째 페이지로</a>
<a data-role="button" href="jMobile09_1.html">세번째 페이지로..</a>
<div id="div1" class="ui-body ui-body-a"></div>
</div><!-- main -->
<div data-role="footer" data-position="fixed">
<h3>footer</h3>
</div><!-- footer -->
</div><!-- page1 -->
<div data-role="page" id="secondPg">
<div data-role="header" data-position="fixed">
<h3>Second Page</h3>
</div>
<div role="main" class="ui-content">
<p>두번째 페이지</p>
<div id="touchArea">
여기를 터치하세요..
</div>
<div id="div2" class="ui-body ui-body-a"> </div>
<a data-role="button" href="#firstPg">첫번째 페이지로..</a>
</div>
</div>
</body>
</html>
<div data-role="page" id="thirdPg">
<div data-role="header" data-position="fixed">
<h3>세번째 페이지</h3>
</div>
<div role="main" class="ui-content">
<img src="https://s.pstatic.net/mimgnews/image/upload/item/2016/11/06/191135301_012.jpg?type=f270_166" id="imgbtn">
<div id="div3" class="ui-body ui-body-a"></div>
<a data-rel = "back" class="ui-btn ui-corner-all ui-btn-b">첫번째 페이지로..</a>
</div>
</div>